Flexbox

Build real layouts with Tailwind's flexbox utilities — direction, alignment, wrapping, and growth — then put it all together in a navbar.

Ad 728×90

flex-direction & flex-wrap

Why: flex turns on flexbox. flex-row (the default) lays children left-to-right, flex-col stacks them top-to-bottom. flex-wrap lets items wrap onto new lines instead of shrinking forever.

<div class="space-y-6 p-4">
  <div class="flex flex-row gap-2">
    <div class="h-12 w-12 rounded bg-indigo-500"></div>
    <div class="h-12 w-12 rounded bg-indigo-500"></div>
    <div class="h-12 w-12 rounded bg-indigo-500"></div>
  </div>
  <div class="flex flex-col gap-2">
    <div class="h-8 rounded bg-emerald-500"></div>
    <div class="h-8 rounded bg-emerald-500"></div>
    <div class="h-8 rounded bg-emerald-500"></div>
  </div>
  <div class="flex w-40 flex-wrap gap-2">
    <div class="h-10 w-16 rounded bg-pink-500"></div>
    <div class="h-10 w-16 rounded bg-pink-500"></div>
    <div class="h-10 w-16 rounded bg-pink-500"></div>
  </div>
</div>

justify-content & align-items

Why: justify-* aligns children along the main axis (horizontal in flex-row) — start, center, between, around, evenly. items-* aligns them along the cross axis (vertical in flex-row) — start, center, end, stretch. The first three rows below fix items-center and vary justify-*; the last four rows fix justify-start and vary items-* with two different-height boxes so the cross-axis alignment is easy to see.

<div class="space-y-4 p-4">
  <div class="flex h-16 items-center justify-start gap-2 rounded bg-slate-100 p-2">
    <div class="h-10 w-10 rounded bg-indigo-500"></div>
    <div class="h-10 w-10 rounded bg-indigo-500"></div>
  </div>
  <div class="flex h-16 items-center justify-center gap-2 rounded bg-slate-100 p-2">
    <div class="h-10 w-10 rounded bg-indigo-500"></div>
    <div class="h-10 w-10 rounded bg-indigo-500"></div>
  </div>
  <div class="flex h-16 items-center justify-between gap-2 rounded bg-slate-100 p-2">
    <div class="h-10 w-10 rounded bg-indigo-500"></div>
    <div class="h-10 w-10 rounded bg-indigo-500"></div>
  </div>
  <div class="flex h-20 items-start gap-2 rounded bg-slate-100 p-2">
    <div class="h-8 w-10 rounded bg-emerald-500"></div>
    <div class="h-14 w-10 rounded bg-emerald-700"></div>
  </div>
  <div class="flex h-20 items-center gap-2 rounded bg-slate-100 p-2">
    <div class="h-8 w-10 rounded bg-emerald-500"></div>
    <div class="h-14 w-10 rounded bg-emerald-700"></div>
  </div>
  <div class="flex h-20 items-end gap-2 rounded bg-slate-100 p-2">
    <div class="h-8 w-10 rounded bg-emerald-500"></div>
    <div class="h-14 w-10 rounded bg-emerald-700"></div>
  </div>
  <div class="flex h-20 items-stretch gap-2 rounded bg-slate-100 p-2">
    <div class="w-10 rounded bg-emerald-500"></div>
    <div class="w-10 rounded bg-emerald-700"></div>
  </div>
</div>

grow, shrink, basis & order

Why: flex-1 lets an item grow and shrink to fill available space — the most common pattern for sidebars + main content. flex-none stops an item from growing or shrinking. order-* visually reorders items without touching the markup.

<div class="space-y-4 p-4">
  <div class="flex gap-2 rounded bg-slate-100 p-2">
    <div class="flex-none rounded bg-indigo-500 px-3 py-4 text-center text-xs text-white">flex-none</div>
    <div class="flex-1 rounded bg-emerald-500 px-3 py-4 text-center text-xs text-white">flex-1</div>
    <div class="flex-1 rounded bg-emerald-700 px-3 py-4 text-center text-xs text-white">flex-1</div>
  </div>
  <div class="flex gap-2 rounded bg-slate-100 p-2">
    <div class="order-3 rounded bg-pink-500 px-3 py-4 text-center text-xs text-white">order-3</div>
    <div class="order-1 rounded bg-pink-500 px-3 py-4 text-center text-xs text-white">order-1</div>
    <div class="order-2 rounded bg-pink-500 px-3 py-4 text-center text-xs text-white">order-2</div>
  </div>
</div>

Building a Navbar with Flexbox

By doing: combine flex, items-center, justify-between, and gap-* to build the layout almost every site starts with — a logo on the left and navigation on the right.

<nav class="flex items-center justify-between rounded-lg bg-slate-900 px-6 py-4">
  <span class="text-lg font-bold text-white">Acme</span>
  <div class="flex items-center gap-6">
    <a href="#" class="text-sm text-slate-300 hover:text-white">Product</a>
    <a href="#" class="text-sm text-slate-300 hover:text-white">Pricing</a>
    <a href="#" class="text-sm text-slate-300 hover:text-white">About</a>
    <button class="rounded-md bg-indigo-500 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-400">
      Sign up
    </button>
  </div>
</nav>