Tailwind CSS Flexbox

Using Flexbox utilities in Tailwind

Flex Container

flex # display: flex
inline-flex # display: inline-flex

Flex Direction

flex-row # horizontal (default)
flex-col # vertical
flex-row-reverse # reverse horizontal
flex-col-reverse # reverse vertical

Flex Wrap

flex-wrap # wrap items
flex-nowrap # no wrap (default)

Justify Content

justify-start # align to start
justify-center # center items
justify-end # align to end
justify-between # space between
justify-around # space around

Align Items

items-start # align to start
items-center # center items
items-end # align to end
items-stretch # stretch to fill

Flex Grow/Shrink

flex-1 # flex: 1 1 0%
flex-auto # flex: 1 1 auto
flex-none # flex: none
grow # flex-grow: 1
shrink # flex-shrink: 1

Gap

gap-4 # gap: 1rem
gap-x-4 # horizontal gap
gap-y-4 # vertical gap