How to use Flexbox in Bootstrap

As I wrote earlier a flexbox is a toll for building layouts with CSS. It is one-dimensional layout compared to CSS Grid. Bootstrap v.4 used flexbox for building layout too. Therefore, if you use the Bootstrap grid in your projects, it is good to know the basic concepts of this tool.

The main element is refered as flex container, and the elements inside it are flex items. 

Direction

A flex container has a direction, defined by the flex-direction property. It can be either a row or column.

---

Sizing

Items can be expanded (flex-grow) and even shrink (flex-shrink) if they don't fit in the container.

Alignment

An items and a container can by align. The justify property is used for alignment in the main axis, and property align for the cross axis. Like with sizing properties, some of these properties are applied to the flex container, and others are applied to the flex items.

There are other properties such as flex-wrap and order, but everything has already been described.

Flexbox in Bootstrap v.4

Bootstrap v.4 now use a TailWind CSS style. Especially when you look in the Utility section. You can set spacing, colors, borders, positions, shadows and much more like a class name. 

For example you can set margin of box with class m-5. Colors with class name bg-dark.  And so on.

There is also a flexbox utilities. You can set all flexbox properties directly in the HTML. Look at example:

Well, isn't that nice? So get to work.