Tailwind CSS

Flexbox Utilities

25 min Lesson 8 of 35

Mastering Flexbox with Tailwind CSS

Flexbox is one of the most powerful layout systems in CSS, and Tailwind makes it incredibly easy to use. With Flexbox, you can create complex, responsive layouts with minimal code. Understanding these utilities will transform how you build user interfaces.

Enabling Flexbox

The foundation of using Flexbox is the flex utility, which transforms an element into a flex container:

Creating Flex Containers

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

<!-- Inline flex container -->
<div class="inline-flex">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<!-- Navigation bar example -->
<nav class="flex bg-gray-800 text-white p-4">
  <a href="#" class="px-3 py-2">Home</a>
  <a href="#" class="px-3 py-2">About</a>
  <a href="#" class="px-3 py-2">Services</a>
  <a href="#" class="px-3 py-2">Contact</a>
</nav>

Flex vs Inline-Flex: flex makes the container a block-level flex container (full width), while inline-flex makes it inline-level (only as wide as its content).

Flex Direction

Control the direction of flex items with direction utilities:

Direction Utilities

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

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

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

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

<!-- Practical example: Card layout -->
<div class="flex flex-col bg-white rounded-lg shadow p-6">
  <img src="icon.svg" class="size-12 mb-4" alt="Icon">
  <h3 class="text-xl font-bold mb-2">Feature Title</h3>
  <p class="text-gray-600">Feature description text here</p>
</div>

Flex Wrap

By default, flex items try to fit on one line. Control wrapping behavior:

Wrap Utilities

<!-- No wrapping (default) -->
<div class="flex flex-nowrap">
  <div class="w-1/3">Item 1</div>
  <div class="w-1/3">Item 2</div>
  <div class="w-1/3">Item 3</div>
  <div class="w-1/3">Item 4 (overflows)</div>
</div>

<!-- Wrap items -->
<div class="flex flex-wrap">
  <div class="w-1/3">Item 1</div>
  <div class="w-1/3">Item 2</div>
  <div class="w-1/3">Item 3</div>
  <div class="w-1/3">Item 4 (wraps to new line)</div>
</div>

<!-- Wrap in reverse -->
<div class="flex flex-wrap-reverse">
  <div class="w-1/3">Item 1</div>
  <div class="w-1/3">Item 2</div>
  <div class="w-1/3">Item 3</div>
  <div class="w-1/3">Item 4</div>
</div>

<!-- Tag cloud example -->
<div class="flex flex-wrap gap-2">
  <span class="px-3 py-1 bg-blue-100 text-blue-800 rounded">JavaScript</span>
  <span class="px-3 py-1 bg-blue-100 text-blue-800 rounded">React</span>
  <span class="px-3 py-1 bg-blue-100 text-blue-800 rounded">Tailwind CSS</span>
  <span class="px-3 py-1 bg-blue-100 text-blue-800 rounded">Node.js</span>
  <span class="px-3 py-1 bg-blue-100 text-blue-800 rounded">TypeScript</span>
</div>

Flex Wrap for Responsive Design: Use flex-wrap to create responsive layouts that automatically adjust to available space without media queries.

Justify Content (Horizontal Alignment)

Control how flex items are distributed along the main axis:

Justify Content Utilities

<!-- 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 -->
<div class="flex justify-between">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

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

<!-- Space evenly -->
<div class="flex justify-evenly">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<!-- Stretch (for flex containers with defined height) -->
<div class="flex justify-stretch">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<!-- Normal (default behavior) -->
<div class="flex justify-normal">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Practical Examples

<!-- Header with logo and navigation -->
<header class="flex justify-between items-center p-4 bg-white shadow">
  <div class="text-xl font-bold">Logo</div>
  <nav class="flex space-x-4">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>
</header>

<!-- Button group with even spacing -->
<div class="flex justify-evenly p-4">
  <button class="px-4 py-2 bg-blue-500 text-white rounded">Button 1</button>
  <button class="px-4 py-2 bg-blue-500 text-white rounded">Button 2</button>
  <button class="px-4 py-2 bg-blue-500 text-white rounded">Button 3</button>
</div>

<!-- Centered content -->
<div class="flex justify-center items-center h-screen">
  <div class="text-center">
    <h1 class="text-4xl font-bold mb-4">Welcome</h1>
    <p class="text-gray-600">Centered content</p>
  </div>
</div>

Align Items (Vertical Alignment)

Control how flex items are aligned along the cross axis:

Align Items Utilities

<!-- Stretch (default) -->
<div class="flex items-stretch h-32">
  <div class="bg-blue-100">Item 1</div>
  <div class="bg-blue-200">Item 2</div>
  <div class="bg-blue-300">Item 3</div>
</div>

<!-- Start (top) -->
<div class="flex items-start h-32">
  <div>Top</div>
  <div>Aligned</div>
</div>

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

<!-- End (bottom) -->
<div class="flex items-end h-32">
  <div>Bottom</div>
  <div>Aligned</div>
</div>

<!-- Baseline -->
<div class="flex items-baseline h-32">
  <div class="text-4xl">Large</div>
  <div class="text-sm">small</div>
  <div>normal</div>
</div>

<!-- Common pattern: Centered icon and text -->
<button class="flex items-center space-x-2 px-4 py-2 bg-blue-500 text-white rounded">
  <svg class="size-5" fill="currentColor"><!-- icon --></svg>
  <span>Click Me</span>
</button>

justify-content vs align-items: Remember that justify-content works on the main axis (horizontal in flex-row), while align-items works on the cross axis (vertical in flex-row). They switch when using flex-col.

Align Self

Override the align-items value for individual flex items:

Align Self Utilities

<div class="flex items-start h-32">
  <div>Item 1 (top)</div>
  <div class="self-center">Item 2 (center)</div>
  <div class="self-end">Item 3 (bottom)</div>
  <div class="self-stretch">Item 4 (stretch)</div>
</div>

<!-- Auto (inherit from parent) -->
<div class="self-auto">Uses parent align-items value</div>

<!-- Practical example: Badge positioned differently -->
<div class="flex items-center space-x-4 p-4 bg-white rounded-lg shadow">
  <img src="avatar.jpg" class="size-12 rounded-full" alt="User">
  <div class="flex-1">
    <h3 class="font-bold">John Doe</h3>
    <p class="text-sm text-gray-600">Software Developer</p>
  </div>
  <span class="self-start px-2 py-1 bg-green-100 text-green-800 text-xs rounded">
    Online
  </span>
</div>

Flex Grow and Shrink

Control how flex items grow to fill available space or shrink when needed:

Flex Grow

<!-- Grow to fill space -->
<div class="flex">
  <div class="flex-1 bg-blue-100">Grows to fill</div>
  <div class="w-32 bg-blue-200">Fixed width</div>
</div>

<!-- Don't grow -->
<div class="flex">
  <div class="flex-none w-64 bg-blue-100">Fixed</div>
  <div class="flex-1 bg-blue-200">Grows</div>
</div>

<!-- Initial size -->
<div class="flex-initial">Initial size</div>

<!-- Auto -->
<div class="flex-auto">Auto</div>

<!-- Dashboard layout example -->
<div class="flex h-screen">
  <aside class="flex-none w-64 bg-gray-800 text-white p-4">
    Sidebar (fixed)
  </aside>
  <main class="flex-1 overflow-y-auto p-8">
    Main content (grows to fill)
  </main>
</div>

Flex Shrink

<!-- Shrink when needed (default) -->
<div class="flex">
  <div class="flex-shrink w-64">Can shrink</div>
  <div class="flex-shrink w-64">Can shrink</div>
  <div class="flex-shrink w-64">Can shrink</div>
</div>

<!-- Don't shrink -->
<div class="flex">
  <div class="flex-shrink-0 w-64">Won't shrink</div>
  <div class="flex-shrink w-64">Will shrink if needed</div>
</div>

<!-- Truncate text in flex container -->
<div class="flex items-center space-x-4">
  <img src="avatar.jpg" class="flex-shrink-0 size-12 rounded-full" alt="Avatar">
  <div class="flex-1 min-w-0">
    <p class="truncate">This is a very long text that will be truncated</p>
  </div>
</div>

Flex Shrink and Images: Images and other replaced elements can shrink unexpectedly. Use flex-shrink-0 on images to prevent this behavior.

Gap Utilities

Add consistent spacing between flex items without margins:

Gap Between Items

<!-- Horizontal and vertical gap -->
<div class="flex flex-wrap 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-6">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<!-- Different gap sizes -->
<div class="flex gap-2">Small gap</div>
<div class="flex gap-4">Medium gap</div>
<div class="flex gap-8">Large gap</div>

<!-- Card grid with gap -->
<div class="flex flex-wrap gap-6">
  <div class="w-64 bg-white rounded-lg shadow p-6">Card 1</div>
  <div class="w-64 bg-white rounded-lg shadow p-6">Card 2</div>
  <div class="w-64 bg-white rounded-lg shadow p-6">Card 3</div>
</div>

Gap vs Space-Between: Use gap utilities with flex instead of space-x or space-y for cleaner code and better control, especially with wrapping flex containers.

Order

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

Order Utilities

<div class="flex">
  <div class="order-3">First in HTML, third visually</div>
  <div class="order-1">Second in HTML, first visually</div>
  <div class="order-2">Third in HTML, second visually</div>
</div>

<!-- Order values: order-1 through order-12, plus order-first, order-last, order-none -->
<div class="order-first">Always first</div>
<div class="order-last">Always last</div>
<div class="order-none">Default order (0)</div>

<!-- Responsive reordering -->
<div class="flex flex-col md:flex-row">
  <div class="order-2 md:order-1">
    Sidebar (below on mobile, left on desktop)
  </div>
  <div class="order-1 md:order-2">
    Main content (above on mobile, right on desktop)
  </div>
</div>

Complete Flexbox Layout Examples

Holy Grail Layout

<div class="min-h-screen flex flex-col">
  <!-- Header -->
  <header class="flex items-center justify-between px-6 py-4 bg-white shadow">
    <div class="text-xl font-bold">Logo</div>
    <nav class="flex space-x-4">
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Contact</a>
    </nav>
  </header>

  <!-- Main content area -->
  <div class="flex flex-1">
    <!-- Left sidebar -->
    <aside class="w-64 bg-gray-100 p-4">
      <h3 class="font-bold mb-4">Categories</h3>
      <ul class="space-y-2">
        <li><a href="#">Category 1</a></li>
        <li><a href="#">Category 2</a></li>
        <li><a href="#">Category 3</a></li>
      </ul>
    </aside>

    <!-- Main content -->
    <main class="flex-1 p-8">
      <h1 class="text-3xl font-bold mb-4">Main Content</h1>
      <p>Content goes here...</p>
    </main>

    <!-- Right sidebar -->
    <aside class="w-64 bg-gray-100 p-4">
      <h3 class="font-bold mb-4">Ads</h3>
      <div class="bg-gray-300 h-32 rounded">Ad space</div>
    </aside>
  </div>

  <!-- Footer -->
  <footer class="bg-gray-800 text-white text-center py-4">
    © 2026 Company Name
  </footer>
</div>

Pricing Cards

<div class="flex flex-wrap justify-center gap-6 p-8">
  <!-- Basic Plan -->
  <div class="flex flex-col w-80 bg-white rounded-lg shadow-lg overflow-hidden">
    <div class="bg-blue-500 text-white text-center py-4">
      <h3 class="text-2xl font-bold">Basic</h3>
    </div>
    <div class="flex-1 p-6">
      <div class="text-center mb-6">
        <span class="text-4xl font-bold">$9</span>
        <span class="text-gray-600">/month</span>
      </div>
      <ul class="space-y-3 mb-6">
        <li class="flex items-center">
          <svg class="size-5 text-green-500 mr-2"><!-- check icon --></svg>
          <span>10 Projects</span>
        </li>
        <li class="flex items-center">
          <svg class="size-5 text-green-500 mr-2"><!-- check icon --></svg>
          <span>5GB Storage</span>
        </li>
        <li class="flex items-center">
          <svg class="size-5 text-green-500 mr-2"><!-- check icon --></svg>
          <span>Email Support</span>
        </li>
      </ul>
    </div>
    <div class="p-6 pt-0">
      <button class="w-full py-3 bg-blue-500 text-white rounded hover:bg-blue-600">
        Choose Plan
      </button>
    </div>
  </div>

  <!-- Pro Plan (similar structure) -->
  <!-- Enterprise Plan (similar structure) -->
</div>

Exercise 1: Create a Product Card

Build a product card using Flexbox with:

Product image at the top
Product name and price in a row with space-between
Rating stars aligned horizontally
Description text that grows to fill space
Add to Cart and Wishlist buttons in a row at the bottom
Use flex-col for the main container and flex for button row

Exercise 2: Build a Responsive Navigation

Create a navigation bar with:

Logo on the left
Navigation links centered (use justify-center or mx-auto)
User profile and cart icon on the right
All items vertically centered
Appropriate spacing between elements

Exercise 3: Design a Comment Section

Create a comment component with:

Avatar image on the left (fixed width, no shrink)
Comment content that grows to fill space
Username and timestamp in a row with space-between
Comment text below the username row
Like and Reply buttons aligned to the right
Nested replies indented using margin-left

Best Practices for Flexbox

Flexbox Guidelines:

Use flex for one-dimensional layouts: Flexbox excels at single-row or single-column layouts
Combine with max-width: Use max-w-* on flex containers to prevent excessive stretching
flex-1 for growing: Use flex-1 on the element that should fill remaining space
items-center for vertical centering: The easiest way to vertically center content
justify-between for spacing: Perfect for headers and toolbars
flex-wrap for responsive: Allow items to wrap naturally without media queries
gap instead of margins: Use gap utilities for consistent spacing
flex-shrink-0 for images: Prevent images from shrinking unexpectedly

Summary

In this lesson, you've mastered Flexbox utilities:

Creating flex containers: flex, inline-flex
Direction: flex-row, flex-col, flex-row-reverse, flex-col-reverse
Wrapping: flex-wrap, flex-nowrap, flex-wrap-reverse
Horizontal alignment: justify-start/center/end/between/around/evenly
Vertical alignment: items-start/center/end/stretch/baseline
Individual alignment: self-start/center/end/stretch/auto
Growing and shrinking: flex-1, flex-none, flex-shrink-0
Spacing: gap, gap-x, gap-y
Ordering: order-1 through order-12, order-first, order-last

Flexbox is essential for modern layouts. In the next lesson, we'll explore CSS Grid utilities for two-dimensional layouts.