Tailwind CSS Flexbox Cheatsheet

Complete Tailwind v4 flexbox reference with visual examples.
Click any class to copy to clipboard.

Display

Class	CSS
`flex`	`display: flex;`
`inline-flex`	`display: inline-flex;`

Flex Direction

Class	CSS
`flex-row`	`flex-direction: row;`
`flex-row-reverse`	`flex-direction: row-reverse;`
`flex-col`	`flex-direction: column;`
`flex-col-reverse`	`flex-direction: column-reverse;`

Flex Direction - Visual Examples

flex-row

flex-row-reverse

flex-col

flex-col-reverse

Flex Wrap

Class	CSS
`flex-wrap`	`flex-wrap: wrap;`
`flex-wrap-reverse`	`flex-wrap: wrap-reverse;`
`flex-nowrap`	`flex-wrap: nowrap;`

Flex Wrap - Visual Examples

flex-nowrap (default)

flex-wrap

flex-wrap-reverse

Justify Content

Class	CSS
`justify-start`	`justify-content: flex-start;`
`justify-end`	`justify-content: flex-end;`
`justify-center`	`justify-content: center;`
`justify-between`	`justify-content: space-between;`
`justify-around`	`justify-content: space-around;`
`justify-evenly`	`justify-content: space-evenly;`
`justify-stretch`	`justify-content: stretch;`

Justify Content - Visual Examples

justify-start

justify-center

justify-end

justify-between

justify-around

justify-evenly

Align Items

Class	CSS
`items-start`	`align-items: flex-start;`
`items-end`	`align-items: flex-end;`
`items-center`	`align-items: center;`
`items-baseline`	`align-items: baseline;`
`items-stretch`	`align-items: stretch;`

Align Items - Visual Examples

items-start

items-center

items-end

items-baseline

items-stretch

Align Content

Class	CSS
`content-start`	`align-content: flex-start;`
`content-end`	`align-content: flex-end;`
`content-center`	`align-content: center;`
`content-between`	`align-content: space-between;`
`content-around`	`align-content: space-around;`
`content-evenly`	`align-content: space-evenly;`
`content-stretch`	`align-content: stretch;`

Align Self

Class	CSS
`self-auto`	`align-self: auto;`
`self-start`	`align-self: flex-start;`
`self-end`	`align-self: flex-end;`
`self-center`	`align-self: center;`
`self-stretch`	`align-self: stretch;`
`self-baseline`	`align-self: baseline;`

Align Self - Visual Examples

The highlighted item uses align-self while container uses items-stretch

self-start

self-center

self-end

self-stretch

self-baseline

Flex

Class	CSS
`flex-1`	`flex: 1 1 0%;`
`flex-auto`	`flex: 1 1 auto;`
`flex-initial`	`flex: 0 1 auto;`
`flex-none`	`flex: none;`

Flex Grow & Shrink

Class	CSS
`grow`	`flex-grow: 1;`
`grow-0`	`flex-grow: 0;`
`shrink`	`flex-shrink: 1;`
`shrink-0`	`flex-shrink: 0;`

Flex, Grow & Shrink - Visual Examples

flex-1 (all items)

flex-1

grow (middle item)

fixed

grow

fixed

shrink-0 (prevent shrinking)

shrink-0

This item can shrink when space is limited

flex-none vs flex-1

flex-none

flex-1

Gap Utilities

Gap utilities use the same spacing scale as padding and margin. See the Tailwind Spacing Scale for all values.

Gap Classes

gap-*All directions

gap-x-*Horizontal gap

gap-y-*Vertical gap

Common Values

gap-28px

gap-416px

gap-624px

gap-832px

Visual Example: gap-4

Order

Class	CSS
`order-first`	`order: calc(-infinity);`
`order-last`	`order: calc(infinity);`
`order-none`	`order: 0;`
`order-1`	`order: 1;`
`order-2`	`order: 2;`
`order-3`	`order: 3;`
`order-4`	`order: 4;`
`order-5`	`order: 5;`
`order-6`	`order: 6;`
`order-7`	`order: 7;`
`order-8`	`order: 8;`
`order-9`	`order: 9;`
`order-10`	`order: 10;`
`order-11`	`order: 11;`
`order-12`	`order: 12;`

Order - Visual Example

Items in DOM order: A, B, C - but visually reordered

A (order-3)

B (order-1)

C (order-2)

A (order-last)

C (order-first)

Common Patterns

Center Everything

<div class="flex items-center justify-center">
  <!-- Centered content -->
</div>

Space Between Header

<header class="flex justify-between items-center">
  <Logo />
  <Nav />
</header>

Vertical Stack

<div class="flex flex-col gap-4">
  <Card />
  <Card />
  <Card />
</div>

Responsive Row/Column

<div class="flex flex-col md:flex-row gap-4">
  <!-- Column on mobile, row on desktop -->
</div>

About Tailwind Flexbox

Tailwind's flexbox utilities map directly to CSS flexbox properties, making layouts intuitive and predictable.

Combine flex with direction, alignment, and spacing utilities to create any layout.

For responsive layouts, prefix any class with a breakpoint: md:flex-row, lg:justify-between

Flexbox Reference Pages

Tailwind Flex Utility Reference -- All flex shorthand classes (flex-1, flex-auto, flex-none)
Tailwind Flex Direction -- flex-row, flex-col, and reverse variants
Tailwind Justify Content -- justify-start, justify-center, justify-between, etc.
Tailwind Align Items -- items-start, items-center, items-end, items-stretch
CSS Flexbox Generator -- Visual flexbox generator with live preview