Flexbox with Tailwind

Flexbox is the workhorse of modern layout, and Tailwind CSS exposes every flexbox feature as an intuitive utility. Navbars, card rows, centered heroes, and sidebars are all a handful of classes away. In this lesson you will learn the flex container utilities, alignment, direction, wrapping, and how children grow and shrink.

Creating a Flex Container

Add flex to an element and its children line up in a row:

html

<div class="flex gap-4">
  <div class="rounded bg-sky-200 p-4">One</div>
  <div class="rounded bg-sky-300 p-4">Two</div>
  <div class="rounded bg-sky-400 p-4">Three</div>
</div>

gap-4 adds equal space between items, replacing the old margin hacks. Use flex-col to stack items vertically instead.

Justify: Alignment on the Main Axis

justify-* controls how items are distributed along the direction of flow:

justify-start (default), justify-center, justify-end
justify-between — first and last items at the edges, space between the rest
justify-around, justify-evenly — distributed spacing

The single most common real-world use is a navbar:

html

<nav class="flex items-center justify-between bg-white p-4 shadow">
  <span class="font-bold">Logo</span>
  <div class="flex gap-6">
    <a href="#" class="text-gray-600">Home</a>
    <a href="#" class="text-gray-600">About</a>
    <a href="#" class="text-gray-600">Contact</a>
  </div>
</nav>

Items: Alignment on the Cross Axis

items-* aligns children perpendicular to the flow: items-start, items-center, items-end, items-stretch (default), and items-baseline. Combined with justify, you get the famous perfect-centering recipe:

html

<div class="flex min-h-screen items-center justify-center bg-gray-900">
  <h1 class="text-4xl font-bold text-white">Perfectly centered</h1>
</div>

Memorize flex items-center justify-center; you will type it hundreds of times.

Direction and Wrapping

flex-row (default), flex-row-reverse, flex-col, flex-col-reverse set direction.
flex-wrap lets items flow onto new lines when they run out of room; flex-nowrap forces one line.

A wrapping tag list:

html

<div class="flex flex-wrap gap-2">
  <span class="rounded-full bg-indigo-100 px-3 py-1 text-sm text-indigo-700">HTML</span>
  <span class="rounded-full bg-indigo-100 px-3 py-1 text-sm text-indigo-700">CSS</span>
  <span class="rounded-full bg-indigo-100 px-3 py-1 text-sm text-indigo-700">Tailwind</span>
</div>

Growing and Shrinking Children

Child utilities control how flexible each item is:

flex-1 — grow and shrink to fill available space equally
flex-auto — grow, but respect the content size
flex-none — never grow or shrink
grow, shrink-0 — fine-grained control

The classic sidebar layout uses a fixed sidebar and a fluid main area:

html

<div class="flex min-h-screen">
  <aside class="w-64 flex-none bg-slate-800 p-4 text-white">Sidebar</aside>
  <main class="flex-1 bg-slate-100 p-6">Main content stretches</main>
</div>

Reordering and Individual Alignment

order-1, order-2, and order-last rearrange items visually without touching the HTML. self-start, self-center, and self-end override the container alignment for a single child.

Key Takeaways

flex plus gap-* is the modern way to lay out rows and columns.
justify-* aligns along the flow direction; items-* aligns across it.
flex items-center justify-center centers anything perfectly.
flex-1 makes an item fill remaining space; flex-none locks its size.
flex-wrap keeps rows responsive when space runs out.

Next up: CSS Grid with Tailwind, for two-dimensional layouts that flexbox cannot handle alone.