Build a Flexbox layout

Flexbox utilities go on the parent. The parent decides how its children line up.

<nav class="flex flex-wrap items-center justify-between gap-4">...</nav>

Flexbox is a one-dimensional layout model. The parent lays out its direct children along a main axis and aligns them on a cross axis. Every flex utility you write is about one of those two axes.

Two axes, not “horizontal and vertical”

With the default flex-row, the main axis runs horizontally:

• justify-between spreads the free space along the row, between the items
• items-center centers the items vertically, on the cross axis
• gap-4 puts consistent space between children
• flex-wrap lets items drop to a new line when the row is too narrow

Now switch to flex-col. The axes rotate. justify-* works vertically and items-* works horizontally. If you memorize “justify means horizontal”, you’ll write bugs the first time you change direction. Think in axes instead.

Items negotiate their size

A typical two-column layout with a fixed sidebar:

<div class="flex gap-4">
  <aside class="w-64 shrink-0">Filters</aside>
  <main class="min-w-0 flex-1">Results</main>
</div>

flex-1 lets the main area grow into the free space and shrink when there isn’t any. shrink-0 stops the sidebar from squeezing below w-64. min-w-0 lets long content inside the main area shrink instead of overflowing. Without it, a long URL in the results can push the whole row wider than its container.

justify-between is not always the answer

justify-between is right when the free space belongs between the items, like a logo on the left and a menu on the right. For a nav with many links, group the links in their own flex container or add one spacer element with flex-1. Spreading eight links across the whole width usually looks wrong.

Use the DevTools overlay

Chrome and Firefox show a Flexbox overlay when you click the flex badge next to an element in the Elements panel. It draws the axes, the gaps, the free space, and each item’s size. It’s a much faster way to understand a layout than changing classes at random.

Try this: build a toolbar that uses flex-col on narrow screens and sm:flex-row when wider. Before touching alignment, write down which axis is which in each mode. Then add one long label and explain each shrink decision.