Reference
CSS Layout

Flexbox Cheatsheet

The compressed essentials. Print this out. Tape it to your wall. Come back here instead of Googling.

Activation

display: flex; /* turns direct children into flex items */ display: inline-flex; /* same, but container is inline-level */

The Axis Rule

Always remember

justify-content → main axis (direction items flow)

align-items → cross axis (perpendicular to flow)

When flex-direction changes, the axes swap. The rule stays the same.

Container Properties

flex-direction

  • row — left → right (default)
  • row-reverse — right → left
  • column — top → bottom
  • column-reverse — bottom → top

justify-content

  • flex-start — pack at start (default)
  • flex-end — pack at end
  • center — center as group
  • space-between — first/last at edges
  • space-around — equal around each
  • space-evenly — equal everywhere

align-items

  • stretch — fill cross axis (default)
  • flex-start — align to start
  • flex-end — align to end
  • center — center on cross axis
  • baseline — align text baselines

flex-wrap

  • nowrap — single line (default)
  • wrap — wrap to new lines
  • wrap-reverse — wrap upward

gap

  • gap: 16px — equal row + column gap
  • row-gap: 16px — between rows only
  • column-gap: 16px — between columns only
  • gap: 16px 24px — row gap, column gap

align-content

Only works with flex-wrap: wrap

  • flex-start — pack lines to start
  • flex-end — pack lines to end
  • center — center lines
  • space-between — distribute lines
  • stretch — lines fill space (default)

Item Properties

flex (shorthand)

  • flex: 1 — grow equally, basis 0%
  • flex: 0 0 auto — fixed size
  • flex: 1 1 200px — grow/shrink from 200px
  • flex: none — completely inflexible

Individual Properties

  • flex-grow: 0 — share of extra space (default: 0)
  • flex-shrink: 1 — shrink factor (default: 1)
  • flex-basis: auto — ideal starting size
  • align-self: center — override container's align-items
  • order: -1 — visual order (default: 0)

Copy-Paste Patterns

Perfect centering

display: flex; justify-content: center; align-items: center;

Navigation bar (logo left, links right)

display: flex; justify-content: space-between; align-items: center;

Equal-width columns

.container { display: flex; gap: 16px; } .column { flex: 1; }

Responsive card grid (no media queries)

.grid { display: flex; flex-wrap: wrap; gap: 16px; } .card { flex: 1 1 280px; }

Sticky footer (content fills page)

body { display: flex; flex-direction: column; min-height: 100vh; } main { flex: 1; } /* header and footer stay content-sized */

Sources