Tailwind CSS Flexbox — Flex Container, Items, and Alignment

DodaTech Updated 2026-06-28 5 min read

In this tutorial, you will learn about Tailwind CSS Flexbox. We cover key concepts, practical examples, and best practices to help you master this topic.

Tailwind CSS flexbox utilities let you create flexible one-dimensional layouts with classes for direction (flex-row, flex-col), wrapping (flex-wrap), alignment (justify-, items-), and item sizing (flex-1, grow, shrink).

What You'll Learn

You will learn how to create flex containers, control direction and wrapping, align items on both axes, manage flex item sizing, and combine gap utilities with flex layouts.

Why It Matters

Flexbox is the primary layout tool for modern web interfaces. DodaTech uses Tailwind flex utilities for navigation bars, card grids, form layouts, and toolbars -- all without writing a single flexbox CSS rule.

Real-World Use

Doda Browser's top toolbar uses flex items-center justify-between with flex-shrink-0 for icons and flex-1 for the search bar, creating a responsive toolbar that adapts to any screen width.

flowchart LR
    A[Borders] --> B[Flexbox]
    B --> C[Direction]
    B --> D[Alignment]
    B --> E[Wrapping]
    B --> F[Item Sizing]
    B --> G[Gap]
    style B fill:#38bdf8,stroke:#0284c7,color:#fff
    style C fill:#22c55e,stroke:#16a34a,color:#fff

Flex Direction

<div class="space-y-8 p-4">
  <!-- Row (default) -->
  <div class="flex flex-row 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>

  <!-- Column -->
  <div class="flex flex-col gap-2">
    <div class="bg-green-100 p-3 rounded">Item A</div>
    <div class="bg-green-200 p-3 rounded">Item B</div>
    <div class="bg-green-300 p-3 rounded">Item C</div>
  </div>

  <!-- Row reverse -->
  <div class="flex flex-row-reverse gap-4">
    <div class="bg-purple-100 p-4 rounded">Item 1 (last)</div>
    <div class="bg-purple-200 p-4 rounded">Item 2 (middle)</div>
    <div class="bg-purple-300 p-4 rounded">Item 3 (first)</div>
  </div>
</div>

Expected output: First row shows horizontal items. Second row shows vertical items. Third row shows reversed horizontal order.

Justify Content

<div class="space-y-4 p-4">
  <div class="flex justify-start gap-2 bg-gray-50 p-3 rounded">
    <div class="bg-gray-400 w-10 h-10 rounded"></div>
    <div class="bg-gray-500 w-10 h-10 rounded"></div>
    <div class="bg-gray-600 w-10 h-10 rounded"></div>
    <span class="text-sm text-gray-500 ml-2">justify-start</span>
  </div>

  <div class="flex justify-center gap-2 bg-gray-50 p-3 rounded">
    <div class="bg-gray-400 w-10 h-10 rounded"></div>
    <div class="bg-gray-500 w-10 h-10 rounded"></div>
    <div class="bg-gray-600 w-10 h-10 rounded"></div>
    <span class="text-sm text-gray-500 ml-2">justify-center</span>
  </div>

  <div class="flex justify-end gap-2 bg-gray-50 p-3 rounded">
    <div class="bg-gray-400 w-10 h-10 rounded"></div>
    <div class="bg-gray-500 w-10 h-10 rounded"></div>
    <div class="bg-gray-600 w-10 h-10 rounded"></div>
    <span class="text-sm text-gray-500 ml-2">justify-end</span>
  </div>

  <div class="flex justify-between bg-gray-50 p-3 rounded">
    <div class="bg-gray-400 w-10 h-10 rounded"></div>
    <div class="bg-gray-500 w-10 h-10 rounded"></div>
    <div class="bg-gray-600 w-10 h-10 rounded"></div>
    <span class="text-sm text-gray-500">justify-between</span>
  </div>

  <div class="flex justify-around bg-gray-50 p-3 rounded">
    <div class="bg-gray-400 w-10 h-10 rounded"></div>
    <div class="bg-gray-500 w-10 h-10 rounded"></div>
    <div class="bg-gray-600 w-10 h-10 rounded"></div>
    <span class="text-sm text-gray-500">justify-around</span>
  </div>
</div>

Expected output: Five alignment options showing start, center, end, space-between, and space-around distributions.

Align Items

<div class="space-y-8 p-4">
  <div class="flex items-start bg-gray-50 p-3 rounded h-24 gap-4">
    <div class="bg-blue-200 p-2 rounded">items-start (top)</div>
    <div class="bg-blue-300 p-4 rounded">Taller</div>
  </div>

  <div class="flex items-center bg-gray-50 p-3 rounded h-24 gap-4">
    <div class="bg-green-200 p-2 rounded">items-center</div>
    <div class="bg-green-300 p-4 rounded">Taller</div>
  </div>

  <div class="flex items-end bg-gray-50 p-3 rounded h-24 gap-4">
    <div class="bg-purple-200 p-2 rounded">items-end (bottom)</div>
    <div class="bg-purple-300 p-4 rounded">Taller</div>
  </div>

  <div class="flex items-stretch bg-gray-50 p-3 rounded h-24 gap-4">
    <div class="bg-orange-200 p-2 rounded flex-1">items-stretch</div>
    <div class="bg-orange-300 p-2 rounded flex-1">Full height</div>
  </div>
</div>

Expected output: Four alignment options controlling vertical positioning within a fixed-height container.

Flex Item Sizing

<div class="space-y-4 p-4">
  <!-- Flex-1: equal width -->
  <div class="flex gap-2">
    <div class="flex-1 bg-blue-100 p-3 rounded text-center">flex-1</div>
    <div class="flex-1 bg-blue-200 p-3 rounded text-center">flex-1</div>
    <div class="flex-1 bg-blue-300 p-3 rounded text-center">flex-1</div>
  </div>

  <!-- Flex-none + flex-1 -->
  <div class="flex gap-2">
    <div class="flex-none bg-green-100 p-3 rounded w-20 text-center">fixed</div>
    <div class="flex-1 bg-green-200 p-3 rounded text-center">flex-1 (fills remaining)</div>
    <div class="flex-none bg-green-300 p-3 rounded w-16 text-center">fixed</div>
  </div>

  <!-- Grow vs shrink -->
  <div class="flex gap-2">
    <div class="grow bg-purple-100 p-3 rounded text-center">grow</div>
    <div class="grow-0 bg-purple-200 p-3 rounded text-center">grow-0</div>
    <div class="shrink bg-purple-300 p-3 rounded text-center">shrink</div>
  </div>
</div>

Expected output: First row: three equal-width items. Second row: fixed items on sides with flexible center. Third row: grow and shrink comparisons.

Flex Wrap

<div class="flex flex-wrap gap-4 p-4 max-w-md border rounded">
  <div class="bg-indigo-100 p-4 rounded w-32">Item 1 (w-32)</div>
  <div class="bg-indigo-200 p-4 rounded w-40">Item 2 (w-40)</div>
  <div class="bg-indigo-300 p-4 rounded w-36">Item 3 (w-36)</div>
  <div class="bg-indigo-400 text-white p-4 rounded w-28">Item 4 (w-28)</div>
  <div class="bg-indigo-500 text-white p-4 rounded w-44">Item 5 (w-44)</div>
</div>

<div class="flex flex-nowrap gap-4 p-4 mt-4 max-w-md border rounded overflow-x-auto">
  <div class="bg-pink-100 p-4 rounded w-48">No wrap - scrolls</div>
  <div class="bg-pink-200 p-4 rounded w-48">No wrap - scrolls</div>
  <div class="bg-pink-300 p-4 rounded w-48">No wrap - scrolls</div>
</div>

Expected output: First row wraps items to next line. Second row stays on one line with horizontal scroll.

Common Mistakes

1. Forgetting flex on the Container

Children of a div do not use flexbox unless the parent has the flex class. justify-between has no effect without flex.

2. Using justify-content When align-items Is Needed

justify-* controls the main axis (horizontal in row). items-* controls the cross axis (vertical in row). Using the wrong one gives unexpected results.

3. Not Using gap Instead of margin

Margin on flex children creates edge spacing issues. Use gap-* on the container for consistent spacing.

4. flex-1 vs grow

flex-1 sets flex-grow, flex-shrink, and flex-basis. grow only sets flex-grow. Use flex-1 for equal distribution.

5. Overflow with Nowrap

flex-nowrap can cause overflow. Use flex-wrap for responsive layouts or add overflow-auto for scroll.

Practice Questions

What is the default flex direction? flex-row -- items are placed left to right.
How do you center content both horizontally and vertically? flex items-center justify-center.
What utility makes items equal width in a flex container? flex-1 on each child item distributes available space equally.
How is justify-between different from justify-around? justify-between places first and last items at the edges. justify-around adds equal space on all sides.
What does flex-wrap do? Allows flex items to flow onto multiple lines when they exceed the container width.

Challenge

Build a responsive navigation bar: logo on the left (flex-none), nav links centered (flex-1 with justify-center), and a button on the right (flex-none). On mobile, switch to flex-col.

FAQ

Can I use flexbox with Tailwind grids?

Yes. Use flex for one-dimensional layouts (rows or columns) and grid for two-dimensional layouts.

How do I make flex items equal height?

Use items-stretch on the container. Flex items stretch to the container's cross-axis height by default.

What is the difference between flex-1 and w-full?

flex-1 grows within a flex container. w-full is always 100 percent width regardless of siblings.

Can I use gap with older browsers?

gap for flexbox is supported in all modern browsers. For legacy support, use margin on children.

How do I order flex items?

Use order-* (order-1, order-2, etc.) on individual flex items to change their visual order.

Mini Project

Build a card layout with: a header (logo, nav, button using flex justify-between), a three-column feature section (flex-1 items with gap), and a footer (flex with centered text). Make the columns stack on mobile.

What's Next

Now master CSS Grid for two-dimensional layouts. Learn how grid utilities complement flex for complex page structures.

← Previous Tailwind CSS Borders — Width, Color, Radius, and Style Next → Tailwind CSS Grid — Grid Template Columns, Rows, and Layout

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Tailwind Css