CSS Flexbox Cheat Sheet: Properties and Values
Flexbox lays out items in one dimension — a row or a column — and distributes space between them. Properties split into two groups: those you set on the container (the flex parent) and those you set on the items (its children).
The mental model: flex-direction sets the main axis; justify-content aligns along it, and align-items aligns along the perpendicular cross axis.
Updated 2026-07-06
Container properties (the flex parent)
| Property | Values | What it does |
|---|---|---|
| display | flex | inline-flex | Turn an element into a flex container |
| flex-direction | row | row-reverse | column | column-reverse | Main axis direction |
| flex-wrap | nowrap | wrap | wrap-reverse | Whether items wrap onto new lines |
| justify-content | flex-start | center | flex-end | space-between | space-around | space-evenly | Alignment along the main axis |
| align-items | stretch | flex-start | center | flex-end | baseline | Alignment along the cross axis |
| align-content | flex-start | center | space-between | stretch | Aligns wrapped lines (multi-row) |
| gap | <length> (e.g. 16px) | Space between items |
Item properties (the children)
| Property | Values | What it does |
|---|---|---|
| flex-grow | 0 | <number> | How much an item grows to fill space |
| flex-shrink | 1 | <number> | How much an item shrinks when space is tight |
| flex-basis | auto | <length> | The item's starting size before grow/shrink |
| flex | e.g. 1 1 0 | 1 | auto | Shorthand for grow, shrink, and basis |
| align-self | auto | center | flex-start | flex-end | stretch | Override align-items for one item |
| order | 0 | <integer> | Reorder an item visually (lower comes first) |
The most common centering trick: on the container, set display: flex; justify-content: center; align-items: center; to center a child both horizontally and vertically. For sizing units used in these values, see the CSS units reference.