05- Flex

Quickly 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.

Direction:

Item 1
Item 2
Item 3
Item 1
Item 2
Item 3

Item 1
Item 2
Item 3
Item 1
Item 2
Item 3

Justify content:

Justify
Content
Start

Justify
Content
End

Justify
Content
Center

Justify
Content
Between

Justify
Content
Around

Justify
Content
Evenly

Align items:

Align
Items
Start

Align
Items
End

Align
Items
center

Align
Items
Baseline

Align
Items
Stretch

Align self:

Flex item
Align self start
Flex item

Flex item
Align self end
Flex item

Flex item
Align self center
Flex item

Flex item
Align self baseline
Flex item

Flex item
Align self stretch
Flex item