Tailwind Flexbox

Flexbox is a layout model that arranges items in a row or column and handles alignment automatically. Tailwind makes flexbox easy to use with short, readable class names.

Activating Flexbox

Add flex to a parent element. Its direct children become flex items and line up in a row by default.

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

Result:  [ Box 1 ][ Box 2 ][ Box 3 ]  (side by side)

Flex Direction

Class             CSS Output                  Layout
───────────────────────────────────────────────────────────
flex-row          flex-direction: row         → → → (default)
flex-row-reverse  flex-direction: row-reverse ← ← ←
flex-col          flex-direction: column      ↓ ↓ ↓
flex-col-reverse  flex-direction: col-reverse ↑ ↑ ↑

Justify Content (Main Axis Alignment)

Justify-content controls how items spread along the main axis (horizontal for row, vertical for column).

Class               Layout (items shown as blocks)
──────────────────────────────────────────────────────────
justify-start       [A][B][C]·····················
justify-end         ·····················[A][B][C]
justify-center      ·········[A][B][C]············
justify-between     [A]··········[B]··········[C]
justify-around      ··[A]·······[B]·······[C]····
justify-evenly      ···[A]······[B]······[C]······

Align Items (Cross Axis Alignment)

Align-items controls how items align on the perpendicular axis (vertical for row direction).

Class              Behavior
──────────────────────────────────────────────────
items-start        Items stick to the top
items-end          Items stick to the bottom
items-center       Items center vertically
items-stretch      Items stretch to fill height (default)
items-baseline     Items align by text baseline

The Cross Axis Diagram

flex-row direction:

Main axis  →  →  →  →  →  →  →
                              
Cross     ┌─────┐  ┌─────┐  ┌─────┐
axis      │  A  │  │  B  │  │  C  │
  ↓       └─────┘  └─────┘  └─────┘
  ↓

Flex Wrap

By default, flex items stay on one line even if they overflow. flex-wrap allows items to move to the next line when there is not enough space.

flex-nowrap   →  All items on one line (default)
flex-wrap     →  Items wrap to next line
flex-wrap-reverse → Items wrap upward

Example:
<div class="flex flex-wrap gap-4">
  <div class="w-32">Item 1</div>
  <div class="w-32">Item 2</div>
  <div class="w-32">Item 3</div>
  <div class="w-32">Item 4</div>
</div>

Gap Between Items

gap-4     →  gap: 1rem (both directions)
gap-x-4   →  column-gap: 1rem
gap-y-4   →  row-gap: 1rem

Flex Grow, Shrink, and Basis

Class          Behavior
────────────────────────────────────────────
flex-1         Item grows and shrinks to fill available space
flex-auto      Grows/shrinks; respects initial size
flex-none      Item does not grow or shrink
flex-initial   Default behavior

grow           flex-grow: 1  (item takes remaining space)
shrink         flex-shrink: 1 (item shrinks when needed)
shrink-0       flex-shrink: 0 (item never shrinks)

Centering an Element With Flex

<div class="flex items-center justify-center h-screen">
  <p>I am perfectly centered!</p>
</div>

Diagram:
┌──────────────────────────────────┐
│                                  │
│                                  │
│         ┌──────────────┐         │
│         │   Centered   │         │
│         └──────────────┘         │
│                                  │
│                                  │
└──────────────────────────────────┘

This three-class combination is one of the most common patterns in Tailwind CSS.