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

# Enable flex behaviors

I'm a flexbox container!
<div class="flex p-2">I'm a flexbox container!</div>

  
        Copied!

For f-center:

Item
Item
Item

For fy-start:

Item
Item
Item

For fx-start:

Item
Item
Item

For fy-center:

Item
Item
Item

For fx-center:

Item
Item
Item

For fy-end:

Item
Item
Item

For fx-end:

Item
Item
Item

For f-space-between:

Item
Item
Item

<div class="flex p-2 f-center">...</div>
<div class="flex p-2 fy-start">...</div>
<div class="flex p-2 fx-start">...</div>
<div class="flex p-2 fy-center">...</div>
<div class="flex p-2 fx-center">...</div>
<div class="flex p-2 fy-end">...</div>
<div class="flex p-2 fx-end">...</div>
<div class="flex p-2 f-space-between">...</div>

  
        Copied!

# Justify content / Align items

  • f-center
  • fy-start
  • fx-start
  • fy-center
  • fx-center
  • fy-end
  • fx-end
  • f-space-between

# Fill

← Container →