Flexbox Utilities

Flexbox is one of the two layout systems Tailwind gives full utility coverage to (the other is Grid, next lesson), and most everyday layout problems — navbars, toolbars, centering, evenly-spaced lists — are solved with a handful of flex utilities.

Turning on flex and setting direction

<nav class="flex items-center justify-between px-6 py-4">
  <span class="font-bold">Logo</span>
  <div class="flex gap-4">
    <a href="#">Docs</a>
    <a href="#">Pricing</a>
  </div>
</nav>

flex sets display: flex. By default flex items lay out in a row, matching CSS's own default — flex-col switches to a column when you need that instead. items-center aligns children along the cross axis (vertically centered, in a row); justify-between spreads children apart along the main axis, pushing the first to one end and the last to the other — the classic navbar pattern of a logo on the left and links on the right with space in between.

Alignment utilities at a glance

| Class | CSS property | Common use | |---|---|---| | justify-start / justify-center / justify-between / justify-end | justify-content | Spacing along the main axis | | items-start / items-center / items-end / items-stretch | align-items | Aligning along the cross axis | | flex-1 | flex: 1 1 0% | Let an item grow/shrink to fill space | | flex-wrap | flex-wrap: wrap | Allow items to wrap to new lines |

Centering, the classic hard problem made trivial

<div class="flex h-screen items-center justify-center">
  <div class="rounded-lg bg-white p-8 shadow-lg">Centered modal content</div>
</div>

Perfectly centering a box both horizontally and vertically used to require a few different CSS tricks depending on context. With flex utilities it's always the same two classes — items-center justify-center — regardless of what's inside or how big it is.

Growing and shrinking

<div class="flex gap-4">
  <aside class="w-64 shrink-0">Sidebar, fixed width</aside>
  <main class="flex-1">Main content, fills remaining space</main>
</div>

shrink-0 prevents the sidebar from shrinking below its set width when space gets tight; flex-1 tells the main content to absorb all remaining space. This two-class combination — one fixed-width sibling, one flex-1 sibling — covers a huge share of real sidebar/content layouts without any calculated widths or percentages.

Responsive flex direction

<div class="flex flex-col gap-4 md:flex-row md:items-center">
  <img class="h-16 w-16 rounded-full" src="/avatar.jpg" alt="" />
  <div>
    <p class="font-semibold">Jordan Lee</p>
    <p class="text-sm text-slate-500">Product Designer</p>
  </div>
</div>

Stacked vertically on mobile, side by side from md up — combining flex utilities with the responsive prefixes from earlier means the same markup adapts its layout at each breakpoint without any separate mobile-specific component.