Build a Flexbox layout

Put Flexbox utilities on the parent:

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

Flexbox is a one-dimensional layout model. The parent distributes its direct children along a main axis and aligns them on the cross axis.

With the default flex-row, the main axis is horizontal:

• justify-between distributes free space along the row
• items-center aligns items vertically on the cross axis
• gap-4 creates consistent space between children
• flex-wrap allows items to form another line when the row is too narrow

Change to flex-col and the axes rotate. justify-* now acts vertically, while items-* acts horizontally. Memorizing “justify means horizontal” produces bugs as soon as direction changes.

Items also negotiate size:

<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 and shrink. shrink-0 protects the fixed sidebar. min-w-0 lets long content inside the main area shrink instead of overflowing due to the automatic minimum size.

Use justify-between only when the free space belongs between the items. For a navigation bar with many links, a flexible spacer or grouped regions can preserve more predictable relationships than spreading every child across the full width.

Inspect the Flexbox overlay in DevTools. It shows axes, gaps, free space, and item sizes more clearly than changing classes at random.

Your action is to build a toolbar that becomes flex-col on narrow screens and sm:flex-row when wider. Predict both axes before changing alignment, then test one long label and explain every shrink decision.