Tailwind Flexbox

Flexbox is the backbone of most Tailwind layouts, powering navigation bars, cards, forms, and alignment everywhere. This lesson introduces the flex container model and the utilities that control how flex items grow, shrink, and wrap.

What Is Flexbox in Tailwind?

Adding the flex class turns an element into a flex container, arranging its direct children in a row by default. From there, utilities like justify-*, items-*, gap-*, and flex-wrap control alignment, spacing, and wrapping behavior.

Flexbox is ideal for one-dimensional layouts, arranging items along a single row or column, while Grid (covered later) handles two-dimensional layouts with both rows and columns simultaneously.

<div class="flex items-center justify-between gap-4 rounded-lg border p-4">
  <span class="font-semibold">Brand</span>
  <nav class="flex gap-4 text-sm">
    <a href="/">Home</a>
    <a href="/about">About</a>
  </nav>
</div>

flex items-center justify-between is the single most common Tailwind pattern for a navbar layout.

Flex Container Syntax

class="flex"
class="flex-row | flex-col | flex-wrap | flex-nowrap"
class="flex-1 | flex-auto | flex-none"

flex (or inline-flex) turns an element into a flex container.
flex-row/flex-col set the main axis direction (covered in depth in the next lesson).
flex-wrap allows items to wrap onto multiple lines instead of overflowing.
flex-1, flex-auto, and flex-none control how individual flex items grow and shrink.

Flexbox Cheatsheet

The utilities you'll reach for constantly when building flex layouts.

Class	CSS Equivalent	Purpose
`flex`	display: flex	Creates a flex container
`flex-row`	flex-direction: row	Items arranged horizontally (default)
`flex-col`	flex-direction: column	Items arranged vertically
`flex-wrap`	flex-wrap: wrap	Items wrap onto new lines when needed
`flex-1`	flex: 1 1 0%	Item grows/shrinks to fill available space
`flex-none`	flex: none	Item never grows or shrinks
`grow` / `grow-0`	flex-grow: 1 / 0	Controls whether an item grows to fill space
`shrink-0`	flex-shrink: 0	Prevents an item from shrinking below its size
`gap-4`	gap: 1rem	Space between flex children
`justify-between`	justify-content: space-between	Distributes items with space between
`items-center`	align-items: center	Centers items on the cross axis

Controlling Growth With flex-1 and flex-none

flex-1 lets an item grow and shrink to fill available space, ignoring its content's natural size. flex-none keeps an item at exactly its content or specified size, never growing or shrinking. This combination is the standard pattern for sidebar layouts.

<div class="flex h-screen">
  <aside class="flex-none w-64 bg-slate-900 text-white p-4">Sidebar</aside>
  <main class="flex-1 p-6">Main content fills remaining space</main>
</div>

The sidebar stays fixed at w-64; the main content stretches to fill whatever space remains.

Wrapping Flex Items

By default, flex items shrink to fit on one line, sometimes causing overflow. Adding flex-wrap lets items flow onto additional lines once they no longer fit, which is common for tag lists and responsive button groups.

<div class="flex flex-wrap gap-2">
  <span class="rounded-full bg-slate-100 px-3 py-1 text-sm">Design</span>
  <span class="rounded-full bg-slate-100 px-3 py-1 text-sm">Engineering</span>
  <span class="rounded-full bg-slate-100 px-3 py-1 text-sm">Marketing</span>
  <span class="rounded-full bg-slate-100 px-3 py-1 text-sm">Product</span>
</div>

When to Choose Flexbox Over Grid

Choose flexbox for one-dimensional arrangements, navbars, button groups, form rows, where content naturally flows in one direction. Choose grid when you need precise control over both rows and columns simultaneously, like a photo gallery or dashboard layout.

Scenario	Better Choice
Navbar with logo and links	Flexbox
Card grid with equal rows and columns	Grid
Centering one element in a box	Flexbox
Dashboard with mixed-size widgets	Grid
Button group or toolbar	Flexbox

Common Mistakes

Forgetting to add flex to the parent before using justify-* or items-*, which have no effect without a flex container.
Using flex-1 on every child when only one child should actually grow to fill space.
Not adding flex-wrap on rows that can overflow on smaller screens.
Confusing justify-* (main axis) with items-* (cross axis) alignment utilities.
Reaching for Grid for simple one-dimensional layouts where Flexbox would be simpler.

Key Takeaways

flex turns an element into a flex container, arranging children in a row by default.
flex-1 and flex-none control whether individual items grow to fill space or stay fixed.
flex-wrap allows items to move onto new lines instead of overflowing or shrinking too far.
Flexbox suits one-dimensional layouts; Grid suits two-dimensional layouts.
gap-* is the modern, cleaner replacement for manually adding margin between flex children.

Pro Tip

Use gap-* instead of margin utilities between flex children. Gap avoids extra spacing at the very start and end of the row, which margin-based spacing tricks always had to work around.