Flex
Container
Flexbox container
Inline flexbox container
Direction
Row
Flex direction row
Flex direction row
Flex direction row
Row-reverse
Flex direction row-reverse
Flex direction row-reverse
Flex direction row-reverse
Column
Flex direction column
Flex direction column
Flex direction column
Column-reverse
Flex direction column-reverse
Flex direction column-reverse
Flex direction column-reverse
Justify content
Start
Justify content start
Justify content start
Justify content start
Center
Justify content center
Justify content center
Justify content center
End
Justify content end
Justify content end
Justify content end
Between
Justify content between
Justify content between
Justify content between
Around
Justify content around
Justify content around
Justify content around
Align items
Start
Align items start
Align items start
Align items start
Center
Align items center
Align items center
Align items center
End
Align items end
Align items end
Align items end
Baseline
Align items baseline
Align items baseline
Align items baseline
Stretch
Align items stretch
Align items stretch
Align items stretch
Align self
Start
Align self start
Flex item
Flex item
Center
Align self center
Flex item
Flex item
End
Align self end
Flex item
Flex item
Baseline
Align self baseline
Flex item
Flex item
Stretch
Align self stretch
Flex item
Flex item
Auto margins
Horizontal
Flex item
Flex item
Margin left auto
Margin right auto
Flex item
Flex item
Vertical
Margin bottom auto
Flex item
Flex item
Flex item
Flex item
Margin top auto
Fill
Flex fill
Flex fill
Flex fill
Grow
Flex grow
Flex grow
Flex grow
Shrink
Flex shrink
Flex shrink
Flex shrink
Wrap
Nowrap
Flex-wrap nowrap
Flex-wrap nowrap
Flex-wrap nowrap
Flex-wrap nowrap
Flex-wrap nowrap
Flex-wrap nowrap
Flex-wrap nowrap
Flex-wrap nowrap
Flex-wrap nowrap
Flex-wrap nowrap
Wrap
Flex-wrap wrap
Flex-wrap wrap
Flex-wrap wrap
Flex-wrap wrap
Flex-wrap wrap
Flex-wrap wrap
Flex-wrap wrap
Flex-wrap wrap
Flex-wrap wrap
Flex-wrap wrap
Wrap-reverse
Flex-wrap reverse
Flex-wrap reverse
Flex-wrap reverse
Flex-wrap reverse
Flex-wrap reverse
Flex-wrap reverse
Flex-wrap reverse
Flex-wrap reverse
Flex-wrap reverse
Flex-wrap reverse
Order
order-first (-1), order-0 to order-5 and order-last (6)
First, but last
Second, but number 5
Third, but number 4
Fourth, but number 3
Fifth, but first
Last, but unordered, so number 2
Align content
Start
Align content start
Align content start
Align content start
Align content start
Align content start
Align content start
Align content start
Align content start
Align content start
Align content start
Center
Align content center
Align content center
Align content center
Align content center
Align content center
Align content center
Align content center
Align content center
Align content center
Align content center
End
Align content end
Align content end
Align content end
Align content end
Align content end
Align content end
Align content end
Align content end
Align content end
Align content end
Between
Align content between
Align content between
Align content between
Align content between
Align content between
Align content between
Align content between
Align content between
Align content between
Align content between
Around
Align content around
Align content around
Align content around
Align content around
Align content around
Align content around
Align content around
Align content around
Align content around
Align content around
Stretch
Align content stretch
Align content stretch
Align content stretch
Align content stretch
Align content stretch
Align content stretch
Align content stretch
Align content stretch
Align content stretch
Align content stretch
Responsive examples
Responsive utility classes exist for all the flexbox utilities: display, flex-direction, justify-content, align-items, align-self, flex-wrap, order and align-content. The examples are hidden on the screen, but can be viewed in the source code or by clicking "Toggle code" below.
Display flex for small devices and up
Display inline-flex for medium devices and up
Display flex for all devices and set flex direction to row for large devices and up
Display flex for all devices and set flex direction to row-reverse for extra large devices and up
Display flex for all devices and set flex direction to column for extra extra large devices and up
Display flex for all devices and set flex direction to column-reverse for small devices and up
Display flex for all devices and justify content to the start for medium devices and up
Display flex for all devices and justify content to the center for large devices and up
Display flex for all devices and justify content to the end for extra large devices and up
Display flex for all devices and justify content between for extra extra large devices and up
Display flex for all devices and justify content around for small devices and up
Display flex for all devices and align items to the start for medium devices and up
Display flex for all devices and align items to the center for large devices and up
Display flex for all devices and align items to the end for extra large devices and up
Display flex for all devices and align items to the baseline for extra extra large devices and up
Display flex for all devices and align items to stretch for small devices and up
Align self to the start for medium devices and up
Align self to the center for large devices and up
Align self to the end for extra large devices and up
Align self to the baseline for extra extra large devices and up
Align self to stretch for small devices and up
Fill item for medium devices and up
Grow item for large devices and up
Shrink item for extra large devices and up
Display flex for all devices and make items not wrap for extra extra large devices and up
Display flex for all devices and make items wrap for small devices and up
Display flex for all devices and make items wrap in reverse for medium devices and up
Set the order to 3 for large devices and up
Set the order to 2 for extra large devices and up
Set the order to 1 for extra extra large devices and up
Display flex for all devices and align content to the start for small devices and up
Display flex for all devices and align content to the center for medium devices and up
Display flex for all devices and align content to the end for large devices and up
Display flex for all devices and align content around for extra large devices and up
Display flex for all devices and align content to stretch for extra extra large devices and up