Flex
Use flex utilities to build flexible layouts. Apply .flex to enable flexbox, then combine with direction, wrapping, alignment, and gap classes.
Display
Use .flex to set an element to display: flex.
<div class="flex">...</div>Direction
Control the direction of flex items.
<div class="flex flex-row">Horizontal (default)</div>
<div class="flex flex-col">Vertical</div>.flex-row
.flex-col
Wrapping
Control whether flex items wrap to new lines.
<div class="flex flex-wrap">Wrap items</div>
<div class="flex flex-nowrap">No wrapping (default)</div>.flex-wrap
Alignment
Shorthand classes for common alignment patterns.
<div class="flex flex-center">Centered on both axes</div>
<div class="flex flex-between">Space-between with vertical centering</div>
<div class="flex items-center">Vertically centered</div>.flex-center — justify-content: center + align-items: center
.flex-between — justify-content: space-between + align-items: center
.items-center — align-items: center
.flex-center
.flex-between
Grow and shrink
Allow items to grow or shrink to fill available space.
<div class="flex">
<div class="flex-grow">Fills remaining space</div>
<div class="flex-shrink">Can shrink below its size</div>
</div>.flex-grow — flex-grow: 1
.flex-shrink — flex-shrink: 1
.flex-grow on the middle item
Gap
Use gap- classes to control spacing between flex or grid children.
<div class="flex gap-4">Uniform gap</div>
<div class="flex gap-x-4">Column gap only</div>
<div class="flex gap-y-4">Row gap only</div>.gap-{0–16} — gap (both axes)
.gap-x-{0–16} — column-gap
.gap-y-{0–16} — row-gap
.gap-2
.gap-4
.gap-8