CSS Flexbox Cheatsheet: Every Property Explained with Examples

Flexbox is a one-dimensional layout system: it lays items out along a single row or column and gives you control over their size, spacing, and alignment. Most of what you'll ever need fits in a short list of properties.

Container properties

.container {
  display: flex;
  flex-direction: row;        /* row | column | row-reverse | column-reverse */
  flex-wrap: wrap;            /* nowrap (default) | wrap */
  justify-content: center;    /* main axis */
  align-items: center;        /* cross axis */
  gap: 1rem;                  /* space between items */
}

• justify-content aligns items along the main axis: flex-start, center, flex-end, space-between, space-around, space-evenly.
• align-items aligns items along the cross axis: stretch (default), flex-start, center, flex-end, baseline.
• align-content spaces multiple wrapped lines; it has no effect on a single line.
• gap adds consistent spacing without margin hacks.

Item properties

• flex-grow: how much of the free space an item takes (0 by default).
• flex-shrink: how readily it shrinks when space is short (1 by default).
• flex-basis: its starting size before growing or shrinking.
• flex: shorthand for grow, shrink, and basis. flex: 1 makes items share space equally; flex: 0 0 200px makes a fixed 200px item.
• align-self overrides align-items for one item; order changes visual order.

Patterns to copy

/* Center anything */
.center { display: flex; justify-content: center; align-items: center; }

/* Navbar: logo left, links right */
.nav { display: flex; justify-content: space-between; align-items: center; }

/* Sticky footer */
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }

Gotchas

• Text or images overflowing a flex item usually need min-width: 0 on that item, because flex items don't shrink below their content size by default.
• flex-direction: column swaps the axes, so justify-content now works vertically.
• Percent heights need a parent with a defined height.
• For two-dimensional layouts (rows and columns together), consider CSS Grid instead.