Flex
Manage the layout,
alignment, and sizing of grid columns, navigation, components, and more
with a full suite of responsive flexbox utilities.
For more complex
implementations, custom CSS may be necessary.
Enable Flexbox behaviour
Use display-flex to create a flexbox container
and change the children elements into flex items.
Flexbox container and children items can be modified by adding other
flexbox properties.
I am a flexbox container.
You can also use display-inline-flex to enable
flex behaviour.
I am a flexbox container.
Flex direction
Set the direction properties of items in a flex container with
different flex-direction properties.
You can omit the horiztontal direction alignment as the browser sets
the display:flex to row.
In the first example flex-row is used to align
the items in row(default). While in second example
flex-row-reverse is used to align the
flex-items in opposite direction.
<div class="...display-flex flex-row"
>
<div class="... border-dark txt-bright bg-red">
Item 1
</div>
<div class="... border-dark txt-bright bg-red">
Item 2
</div>
<div class="... border-dark txt-bright bg-red">
Item 3
</div>
<div class="...display-flex flex-row"
>
<div class="... border-dark txt-bright bg-red">
Item 1
</div>
<div class="... border-dark txt-bright bg-red">
Item 2
</div>
<div class="... border-dark txt-bright bg-red">
Item 3
</div>
Similarly we can align the flex items in vertical direction with flex-column
and "flex-column-reverse" to start the vertical direction from the opposite
side.
<div class="...display-flex flex-col"
>
<div class="... border-dark txt-bright bg-red">
Item 1
</div>
<div class="... border-dark txt-bright bg-red">
Item 2
</div>
<div class="... border-dark txt-bright bg-red">
Item 3
</div>
<div class="...display-flex flex-col-reverse"
>
<div class="... border-dark txt-bright bg-red">
Item 1
</div>
<div class="... border-dark txt-bright bg-red">
Item 2
</div>
<div class="... border-dark txt-bright bg-red">
Item 3
</div>
Justify-content
With "Justify-content" the flex items can be aligned along the main
axis(x-axis~ flex-direction:row; || y-axis~flex-direction:column;).
For the x-axis justify-content is set to start by default by the browser.
Choose between justify-content-start , justify-content-end , justify-content-center
, justify-content-between , justify-content-around , justify-content-even to
align the
flex-items along the main axis.
Here horizontal alignment flex-row is used.
In the first example flex-start is used.
<div class="...display-flex flex-row justify-content-start"
>
<div class="... border-dark txt-bright bg-red">
Item 1
</div>
<div class="... border-dark txt-bright bg-red">
Item 2
</div>
<div class="... border-dark txt-bright bg-red">
Item 3
</div>
In the example given below "justify-content-end is used.
<div class="...display-flex flex-row justify-content-end"
>
<div class="... border-dark txt-bright bg-red">
Item 1
</div>
<div class="... border-dark txt-bright bg-red">
Item 2
</div>
<div class="... border-dark txt-bright bg-red">
Item 3
</div>
In the example given below justify-content-center is used.
<div class="...display-flex flex-row justify-content-center"
>
<div class="... border-dark txt-bright bg-red">
Item 1
</div>
<div class="... border-dark txt-bright bg-red">
Item 2
</div>
<div class="... border-dark txt-bright bg-red">
Item 3
</div>
In the example given below "justify-content-between" is used.
<div class="...display-flex flex-row justify-content-between"
>
<div class="... border-dark txt-bright bg-red">
Item 1
</div>
<div class="... border-dark txt-bright bg-red">
Item 2
</div>
<div class="... border-dark txt-bright bg-red">
Item 3
</div>
In the example given below justify-content-around is used.
<div class="...display-flex flex-row justify-content-around"
>
<div class="... border-dark txt-bright bg-red">
Item 1
</div>
<div class="... border-dark txt-bright bg-red">
Item 2
</div>
<div class="... border-dark txt-bright bg-red">
Item 3
</div>
In the example given below "justify-content-even" is used.
<div class="...display-flex flex-row justify-content-even"
>
<div class="... border-dark txt-bright bg-red">
Item 1
</div>
<div class="... border-dark txt-bright bg-red">
Item 2
</div>
<div class="... border-dark txt-bright bg-red">
Item 3
</div>
Align-items
align-items is used to align the flex-items along the cross-axis (Y-axis for flex-row
and X-axis forflex-column).
Choose between align-items-start , align-items-end , align-items-center , align-items-stretch and align-items-baseline.
Examples of some of the align classes given above are shown below.
In the first example align-items-start is used.
<div class="...display-flex flex-row align-items-start"
>
<div class="... border-dark txt-bright bg-red">
Item 1
</div>
<div class="... border-dark txt-bright bg-red">
Item 2
</div>
<div class="... border-dark txt-bright bg-red">
Item 3
</div>
In the example given below align-items-center is used.
<div class="...display-flex flex-row align-items-center"
>
<div class="... border-dark txt-bright bg-red">
Item 1
</div>
<div class="... border-dark txt-bright bg-red">
Item 2
</div>
<div class="... border-dark txt-bright bg-red">
Item 3
</div>
In the example given below align-items-end is used.
<div class="...display-flex flex-row align-items-end"
>
<div class="... border-dark txt-bright bg-red">
Item 1
</div>
<div class="... border-dark txt-bright bg-red">
Item 2
</div>
<div class="... border-dark txt-bright bg-red">
Item 3
</div>
