02 - Layout with Flexbox

Flexbox Basics

Flexbox is perfect for one-dimensional layouts (rows or columns). Tailwind makes it easy with utility classes.

Enable Flexbox

<!-- Create a flex container -->
<div class="flex">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Flex Direction

<!-- Row (default) -->
<div class="flex flex-row">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<!-- Column -->
<div class="flex flex-col">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<!-- Row reverse -->
<div class="flex flex-row-reverse">
  <div>3</div>
  <div>2</div>
  <div>1</div>
</div>

<!-- Column reverse -->
<div class="flex flex-col-reverse">
  <div>3</div>
  <div>2</div>
  <div>1</div>
</div>

Justify Content (Main Axis)

Controls spacing along the main axis:

<!-- Start (default) -->
<div class="flex justify-start">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<!-- Center -->
<div class="flex justify-center">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<!-- End -->
<div class="flex justify-end">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<!-- Space between — max space between items -->
<div class="flex justify-between">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<!-- Space around — equal space around items -->
<div class="flex justify-around">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<!-- Space evenly — equal space between and around -->
<div class="flex justify-evenly">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Align Items (Cross Axis)

Controls alignment perpendicular to the main axis:

<!-- Stretch (default) -->
<div class="flex items-stretch h-32">
  <div>Stretches</div>
  <div>to full</div>
  <div>height</div>
</div>

<!-- Start -->
<div class="flex items-start h-32">
  <div>Top</div>
  <div>aligned</div>
  <div>items</div>
</div>

<!-- Center -->
<div class="flex items-center h-32">
  <div>Vertically</div>
  <div>centered</div>
  <div>items</div>
</div>

<!-- End -->
<div class="flex items-end h-32">
  <div>Bottom</div>
  <div>aligned</div>
  <div>items</div>
</div>

<!-- Baseline -->
<div class="flex items-baseline h-32">
  <div class="text-xl">Text</div>
  <div class="text-sm">baseline</div>
  <div>aligned</div>
</div>

Centering

The most common pattern — center both horizontally and vertically:

<div class="flex items-center justify-center h-screen">
  <div>Perfectly centered!</div>
</div>

<!-- Center a card -->
<div class="flex items-center justify-center min-h-screen bg-gray-100">
  <div class="bg-white p-8 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold mb-4">Centered Card</h2>
    <p class="text-gray-600">This card is centered on the page.</p>
  </div>
</div>

Gap

Add space between flex items:

<!-- Gap on all sides -->
<div class="flex gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<!-- Horizontal gap only -->
<div class="flex gap-x-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<!-- Vertical gap only -->
<div class="flex flex-col gap-y-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<!-- Different gap sizes -->
<div class="flex gap-2">Small gap (8px)</div>
<div class="flex gap-4">Medium gap (16px)</div>
<div class="flex gap-8">Large gap (32px)</div>

Flex Wrap

Control whether items wrap to new lines:

<!-- No wrap (default) — items stay on one line -->
<div class="flex flex-nowrap">
  <!-- Items will overflow if too many -->
</div>

<!-- Wrap — items move to next line when needed -->
<div class="flex flex-wrap gap-4">
  <div class="w-32 h-32 bg-blue-500">1</div>
  <div class="w-32 h-32 bg-blue-500">2</div>
  <div class="w-32 h-32 bg-blue-500">3</div>
  <div class="w-32 h-32 bg-blue-500">4</div>
  <div class="w-32 h-32 bg-blue-500">5</div>
</div>

<!-- Wrap reverse -->
<div class="flex flex-wrap-reverse">
  <!-- Items wrap from bottom to top -->
</div>

Flex Grow and Shrink

Control how items resize:

<!-- Flex grow — item takes up remaining space -->
<div class="flex gap-4">
  <div class="bg-blue-500 p-4">Fixed</div>
  <div class="flex-1 bg-green-500 p-4">Grows to fill space</div>
  <div class="bg-blue-500 p-4">Fixed</div>
</div>

<!-- Multiple growing items share space equally -->
<div class="flex gap-4">
  <div class="flex-1 bg-blue-500 p-4">Grow 1</div>
  <div class="flex-1 bg-green-500 p-4">Grow 1</div>
  <div class="flex-1 bg-red-500 p-4">Grow 1</div>
</div>

<!-- Don't grow or shrink -->
<div class="flex gap-4">
  <div class="flex-none w-32 bg-blue-500 p-4">Fixed width</div>
  <div class="flex-1 bg-green-500 p-4">Flexible</div>
</div>

Align Self

Override alignment for individual items:

<div class="flex items-start h-32 gap-4 bg-gray-100">
  <div class="bg-blue-500 p-4">Start aligned</div>
  <div class="self-center bg-green-500 p-4">Center aligned</div>
  <div class="self-end bg-red-500 p-4">End aligned</div>
</div>

Practical Examples

Navigation Bar

<nav class="flex items-center justify-between px-6 py-4 bg-white shadow">
  <div class="text-xl font-bold text-gray-800">Logo</div>

  <div class="flex gap-6">
    <a href="#" class="text-gray-600 hover:text-gray-900">Home</a>
    <a href="#" class="text-gray-600 hover:text-gray-900">About</a>
    <a href="#" class="text-gray-600 hover:text-gray-900">Contact</a>
  </div>

  <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">
    Sign In
  </button>
</nav>

Card Grid with Flexbox

<div class="flex flex-wrap gap-6 p-6">
  <!-- Card 1 -->
  <div class="flex-1 min-w-[250px] bg-white p-6 rounded-lg shadow">
    <h3 class="text-xl font-bold mb-2">Card 1</h3>
    <p class="text-gray-600">Card content here</p>
  </div>

  <!-- Card 2 -->
  <div class="flex-1 min-w-[250px] bg-white p-6 rounded-lg shadow">
    <h3 class="text-xl font-bold mb-2">Card 2</h3>
    <p class="text-gray-600">Card content here</p>
  </div>

  <!-- Card 3 -->
  <div class="flex-1 min-w-[250px] bg-white p-6 rounded-lg shadow">
    <h3 class="text-xl font-bold mb-2">Card 3</h3>
    <p class="text-gray-600">Card content here</p>
  </div>
</div>

Split Layout

<div class="flex h-screen">
  <!-- Sidebar -->
  <aside class="w-64 bg-gray-800 text-white p-6">
    <h2 class="text-xl font-bold mb-4">Sidebar</h2>
    <nav class="flex flex-col gap-2">
      <a href="#" class="hover:bg-gray-700 p-2 rounded">Dashboard</a>
      <a href="#" class="hover:bg-gray-700 p-2 rounded">Settings</a>
      <a href="#" class="hover:bg-gray-700 p-2 rounded">Logout</a>
    </nav>
  </aside>

  <!-- Main content -->
  <main class="flex-1 p-6 bg-gray-100">
    <h1 class="text-3xl font-bold mb-4">Main Content</h1>
    <p class="text-gray-700">Your content goes here</p>
  </main>
</div>

Feature Grid

<div class="flex flex-wrap gap-8 p-8">
  <div class="flex items-start gap-4 flex-1 min-w-[300px]">
    <div class="bg-blue-500 text-white p-3 rounded-lg">
      <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
        <!-- Icon SVG -->
      </svg>
    </div>
    <div>
      <h3 class="font-bold text-lg mb-2">Feature 1</h3>
      <p class="text-gray-600">Description of the feature</p>
    </div>
  </div>

  <div class="flex items-start gap-4 flex-1 min-w-[300px]">
    <div class="bg-green-500 text-white p-3 rounded-lg">
      <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
        <!-- Icon SVG -->
      </svg>
    </div>
    <div>
      <h3 class="font-bold text-lg mb-2">Feature 2</h3>
      <p class="text-gray-600">Description of the feature</p>
    </div>
  </div>
</div>

Key Takeaways

  • Use flex to create a flex container
  • flex-row and flex-col control direction
  • justify-* controls main axis alignment
  • items-* controls cross axis alignment
  • gap-* adds space between items
  • flex-1 makes items grow to fill space
  • flex-wrap allows items to wrap to new lines
  • Combine flexbox utilities to build complex layouts
  • Perfect for navigation bars, cards, and one-dimensional layouts