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