Flexbox Fundamentals with Tailwind

Tailwind maps every CSS Flexbox property to utility classes. Enabling flex layout requires just the flex class on a container; the children immediately become flex items. The flex-direction is controlled by flex-row (default) and flex-col, with flex-row-reverse and flex-col-reverse for reversed order. Wrapping behaviour uses flex-wrap, flex-nowrap, and flex-wrap-reverse. Alignment along the main axis uses justify-start, justify-center, justify-end, justify-between, justify-around, and justify-evenly — matching the CSS justify-content values. Cross-axis alignment uses items-start, items-center, items-end, items-baseline, and items-stretch. For individual item alignment, the self-* utilities override the container alignment on a per-item basis. The gap utilities (gap-4, gap-x-6, gap-y-2) replace the old technique of adding negative margins to flex containers. Gap controls spacing between flex items without adding unwanted outer margins. Flex growth and shrinking is managed with flex-1 (flex: 1 1 0%), flex-auto (flex: 1 1 auto), flex-initial (flex: 0 1 auto), and flex-none (flex: none), along with explicit grow, grow-0, shrink, and shrink-0 classes.

Example

<!-- Basic flex row with gap -->
<div class="flex gap-4">
  <div class="bg-blue-100 p-4 rounded">Item 1</div>
  <div class="bg-blue-200 p-4 rounded">Item 2</div>
  <div class="bg-blue-300 p-4 rounded">Item 3</div>
</div>

<!-- Centered content (both axes) -->
<div class="flex items-center justify-center h-64 bg-gray-50 rounded-xl">
  <p class="text-gray-400">Perfectly centred</p>
</div>

<!-- Space-between navbar pattern -->
<header class="flex items-center justify-between px-6 h-16 bg-white shadow">
  <span class="font-bold text-lg">Logo</span>
  <nav class="flex items-center gap-6 text-sm text-gray-600">
    <a href="#">Home</a>
    <a href="#">Docs</a>
    <a href="#">Blog</a>
  </nav>
  <button class="bg-blue-600 text-white px-4 py-1.5 rounded-lg text-sm">Sign In</button>
</header>

<!-- Flex column form layout -->
<form class="flex flex-col gap-4 max-w-md mx-auto p-6">
  <input class="border rounded px-3 py-2" placeholder="Name" />
  <input class="border rounded px-3 py-2" placeholder="Email" />
  <textarea class="border rounded px-3 py-2" rows="4" placeholder="Message"></textarea>
  <button class="bg-green-600 text-white py-2 rounded font-medium">Submit</button>
</form>

<!-- flex-1 equal columns -->
<div class="flex gap-4">
  <div class="flex-1 bg-purple-50 p-4 rounded">Takes equal space</div>
  <div class="flex-1 bg-purple-100 p-4 rounded">Takes equal space</div>
  <div class="flex-none w-48 bg-purple-200 p-4 rounded">Fixed 12rem width</div>
</div>

HTML

Full Editor

Related Resources

Tailwind CSS Reference

Complete tag & property list

Tailwind CSS How-To Guides

Step-by-step practical guides

Tailwind CSS Exercises

Practice what you've learned