Using Flexbox

Flexbox Basics

Flexbox is a one-dimensional layout model that arranges items in a row or column. Tailwind gives you full control over every flexbox property through utility classes.

Enabling Flexbox

<div class="flex">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Adding flex activates display: flex. By default, children are laid out in a horizontal row. Use inline-flex if you want the container to behave inline.

Flex Direction

<!-- Row (default) -->
<div class="flex flex-row">...</div>

<!-- Row reversed -->
<div class="flex flex-row-reverse">...</div>

<!-- Column -->
<div class="flex flex-col">...</div>

<!-- Column reversed -->
<div class="flex flex-col-reverse">...</div>

• flex-row — Horizontal, left to right (default).
• flex-col — Vertical, top to bottom.
• The -reverse variants flip the order.

Justify Content (Main Axis)

Controls how items are distributed along the main axis (horizontal in row, vertical in column).

<div class="flex justify-start">...</div>     <!-- Left-aligned -->
<div class="flex justify-center">...</div>    <!-- Centered -->
<div class="flex justify-end">...</div>       <!-- Right-aligned -->
<div class="flex justify-between">...</div>   <!-- Space between items -->
<div class="flex justify-around">...</div>    <!-- Equal space around items -->
<div class="flex justify-evenly">...</div>    <!-- Equal space between and around -->

Align Items (Cross Axis)

Controls how items are aligned along the cross axis (vertical in row mode).

<div class="flex items-start">...</div>      <!-- Top-aligned -->
<div class="flex items-center">...</div>     <!-- Vertically centered -->
<div class="flex items-end">...</div>        <!-- Bottom-aligned -->
<div class="flex items-stretch">...</div>    <!-- Stretch to fill (default) -->
<div class="flex items-baseline">...</div>   <!-- Baseline-aligned -->

Center Anything

The most common centering pattern — horizontally and vertically:

<div class="flex items-center justify-center min-h-screen">
  <div class="bg-white p-8 rounded-xl shadow-lg">
    <h2 class="text-2xl font-bold">I am perfectly centered!</h2>
  </div>
</div>

Flex Wrap

<!-- No wrapping (default) -->
<div class="flex flex-nowrap">...</div>

<!-- Wrap to next line -->
<div class="flex flex-wrap">...</div>

<!-- Wrap in reverse order -->
<div class="flex flex-wrap-reverse">...</div>

Gap

Modern gap utilities replace the need for space-x and space-y in flex containers:

<div class="flex gap-4">
  <div class="bg-blue-200 p-4">A</div>
  <div class="bg-blue-200 p-4">B</div>
  <div class="bg-blue-200 p-4">C</div>
</div>

<!-- Separate row and column gaps -->
<div class="flex flex-wrap gap-x-8 gap-y-4">...</div>

Flex Grow & Shrink

<div class="flex">
  <div class="flex-none w-24">Fixed width</div>
  <div class="flex-1">Takes remaining space</div>
  <div class="flex-none w-24">Fixed width</div>
</div>

Order

Change the visual order of flex children without changing the HTML:

<div class="flex">
  <div class="order-3">I appear third</div>
  <div class="order-1">I appear first</div>
  <div class="order-2">I appear second</div>
</div>

Self Alignment

Override the parent's items-* alignment for a specific child:

<div class="flex items-center h-32">
  <div class="self-start">Top</div>
  <div>Center (inherited)</div>
  <div class="self-end">Bottom</div>
</div>

Practical Example — Navigation Bar

<nav class="flex items-center justify-between bg-white shadow px-6 py-4">
  <!-- Logo -->
  <a href="#" class="text-xl font-bold text-indigo-600">Brand</a>

  <!-- Links -->
  <ul class="flex items-center gap-6 text-sm font-medium text-gray-700">
    <li><a href="#" class="hover:text-indigo-600">Home</a></li>
    <li><a href="#" class="hover:text-indigo-600">About</a></li>
    <li><a href="#" class="hover:text-indigo-600">Services</a></li>
    <li><a href="#" class="hover:text-indigo-600">Contact</a></li>
  </ul>

  <!-- CTA -->
  <a href="#" class="bg-indigo-600 text-white px-4 py-2 rounded-lg text-sm font-semibold hover:bg-indigo-700">
    Sign Up
  </a>
</nav>

Practical Example — Footer Columns

<footer class="bg-gray-900 text-gray-300 py-12">
  <div class="max-w-6xl mx-auto px-4 flex flex-col md:flex-row gap-8">
    <div class="flex-1">
      <h4 class="text-white font-bold mb-3">Company</h4>
      <ul class="space-y-2 text-sm">
        <li><a href="#">About Us</a></li>
        <li><a href="#">Careers</a></li>
        <li><a href="#">Blog</a></li>
      </ul>
    </div>
    <div class="flex-1">
      <h4 class="text-white font-bold mb-3">Support</h4>
      <ul class="space-y-2 text-sm">
        <li><a href="#">Help Center</a></li>
        <li><a href="#">FAQ</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
    <div class="flex-1">
      <h4 class="text-white font-bold mb-3">Legal</h4>
      <ul class="space-y-2 text-sm">
        <li><a href="#">Privacy</a></li>
        <li><a href="#">Terms</a></li>
        <li><a href="#">Cookies</a></li>
      </ul>
    </div>
  </div>
</footer>

Recap

• flex activates flexbox; flex-col switches to column direction.
• justify-* controls the main axis; items-* controls the cross axis.
• flex-1 makes a child grow to fill available space; flex-none keeps it fixed.
• gap-* adds spacing between flex children without extra margin.
• order-* and self-* control individual child behavior.

Next, we will explore responsive classes and breakpoints.