Guides · Updated 2026-10-23

The flexbox cheat sheet: every property and what it actually moves

Flexbox is how layout gets done: one container property set, and a row of divs becomes a navbar, a card row, a perfectly centered modal. Yet most of us still guess between justify-content and align-items, or cargo-cult flex: 1 without knowing what the 1 is.

This cheat sheet fixes the mental model in one read, then gives you the five recipes that cover 90% of real layouts. Every example here can be reproduced live in the free flexbox playground — flip a property, watch the boxes move, copy the CSS.

The mental model: two axes, one rule

A flex container lays items along a main axis, chosen by flex-direction (row by default, column to stack). Everything else follows one rule:

justify-content positions items along the main axis — start, end, center, or distributed with space-between / space-around / space-evenly.
align-items positions them across it — stretch (default), flex-start, flex-end, center, baseline.

Flip flex-direction to column and the two swap what they visually do — same properties, rotated axes. This is the single most common flexbox confusion, and the fastest cure is flipping the direction select in the playground and watching the items rearrange.

Add gap for spacing between items (it replaced the margin hacks years ago) and flex-wrap: wrap to let items break onto new lines, with align-content controlling how the wrapped lines pack.

Per-item control: grow, shrink, basis

Each item carries three numbers, usually written with the flex shorthand — flex: grow shrink basis:

flex-grow — the item's share of leftover space. Items with grow 2 take twice the extra space of items with grow 1.
flex-shrink — how willingly it gives space up when the container is too small (0 = never shrink).
flex-basis — its starting size before growing and shrinking; auto means "my content's size".

The idioms to memorize: flex: 1 (= 1 1 0) makes items split space equally regardless of content; flex: auto (= 1 1 auto) splits leftover space but respects content size; flex: none (= 0 0 auto) makes an item rigid. One item can also override the container's alignment with align-self.

The five recipes that cover real layouts

1. Perfect centering (modals, hero sections, empty states):

.container { display: flex; justify-content: center; align-items: center; }

2. Navbar — logo left, links right:

.nav { display: flex; justify-content: space-between; align-items: center; gap: 16px; }

3. Equal-width card row that wraps:

.cards { display: flex; flex-wrap: wrap; gap: 16px; }
.card { flex: 1 1 250px; }  /* grow, shrink, min ~250px before wrapping */

4. Sticky footer — footer at the bottom even on short pages:

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

5. Sidebar layout — fixed sidebar, fluid content:

.layout { display: flex; }
.sidebar { flex: none; width: 240px; }
.content { flex: 1; min-width: 0; }  /* min-width: 0 lets long content shrink */

Rebuild any of these in the playground to see which property does what — it emits only the properties you changed, so the copied CSS stays this short.

Flexbox or Grid?

The working rule: flexbox for one dimension, grid for two. A navbar, a button row, a vertical stack — flexbox, because content flows along one line (even if it wraps). A page skeleton, a photo gallery with strict rows and columns, a dashboard — grid, because you are placing things on both axes at once.

They compose: a grid for the page, flexbox inside each cell. If you are fighting flexbox with nested wrappers to line things up in two directions, that is the signal to switch the outer layer to grid.

Polishing components while you are here: the box shadow generator and CSS gradient generator build the other half of a card's look, visually.

Open the free flexbox playground

Frequently asked questions

How do I center a div with flexbox?

On the parent: display: flex; justify-content: center; align-items: center;. The first centers along the main axis, the second across it. It works for any content size — try it live in the flexbox playground.

What is the difference between justify-content and align-items?

justify-content distributes items along the main axis (the flex-direction); align-items aligns them across it. With flex-direction: row, justify-content is horizontal and align-items vertical; with column they swap.

What does flex: 1 mean?

It is shorthand for flex-grow: 1, flex-shrink: 1, flex-basis: 0 — the item ignores its content size and takes an equal share of the container, which is how equal columns are made.

When should I use grid instead of flexbox?

Use grid when you are controlling rows and columns at once (page layouts, galleries, dashboards) and flexbox when content flows along one axis (navbars, button rows, stacks). They nest happily in the same page.