Flexbox

Build flexible one-dimensional layouts with utilities for direction, wrap, alignment, and grow or shrink.

4 min read Level 2/5 #tailwind#layout#flexbox

What you'll learn

Use flex with direction and wrap
Align with justify, items, and content utilities
Control children with grow, shrink, and basis

Flexbox handles one-dimensional layouts — a row or a column. Every flex property maps directly to a utility, so the whole layout reads from the class list.

Container Setup

<div class="flex flex-col md:flex-row flex-wrap justify-between items-center gap-4">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

Reading the classes: a flex container that stacks as a column on mobile and switches to a row from md up, wraps when space runs out, spreads items along the main axis with justify-between, centers them on the cross axis with items-center, and puts a consistent gap-4 between them. Prefer gap-* over margins between flex children — it never adds a stray edge gap.

Aligning the Whole Thing

justify-* — main-axis distribution: start, center, end, between, around, evenly.
items-* — cross-axis alignment of each item: start, center, end, stretch, baseline.
content-* — distributes wrapped lines when there is extra cross-axis space.

Controlling Children

Children get their own utilities for how they flex:

<div class="flex gap-4">
  <aside class="shrink-0 basis-64">fixed-ish sidebar</aside>
  <main class="flex-1">takes the remaining space</main>
</div>

flex-1 lets a child grow to fill leftover space, shrink-0 stops a child from being squeezed, basis-64 sets its starting size, and grow/order-2/self-end fine-tune individual items. The classic navbar is just flex items-center justify-between — logo left, actions right, vertically centered, no custom CSS.

Grid →