/cheatsheets/css/css-flexbox-cheat-sheet
CSS flexbox cheat sheet: container and item properties
The commands on this page have not been executed by our verification runner yet.updated 2026-10-20
- tool
- CSS
- versions
- CSS Flexible Box Layout Level 1
- os
- any
Flexbox lays out items in one direction, a row or a column. Properties on the container decide direction, wrapping and alignment; properties on the items decide how each one grows, shrinks and aligns itself.
Container
| Property | Values | Effect |
|---|---|---|
| display | flex | inline-flex | turns on flexbox for the children |
| flex-direction | row | row-reverse | column | column-reverse | main axis direction |
| flex-wrap | nowrap | wrap | wrap-reverse | allow items onto several lines |
| justify-content | flex-start | center | flex-end | space-between | space-around | space-evenly | distribution along the main axis |
| align-items | stretch | flex-start | center | flex-end | baseline | alignment across the main axis |
| align-content | same as justify-content, plus stretch | spacing of the lines when wrapping |
| gap | <length> [<length>] | space between items (row gap, column gap) |
Items
| Property | Values | Effect |
|---|---|---|
| flex | <grow> <shrink> <basis>, e.g. 1 1 0 | shorthand for grow, shrink and basis |
| flex-grow | <number> | share of the free space this item takes |
| flex-shrink | <number> | how much the item shrinks when space is short (0 = never) |
| flex-basis | auto | <length> | starting size before growing or shrinking |
| align-self | auto | flex-start | center | flex-end | stretch | overrides align-items for one item |
| order | <integer> | visual order (does not change tab order) |
Recipes
/* centre anything */
.center { display: flex; justify-content: center; align-items: center; }
/* toolbar: logo left, actions right */
.toolbar { display: flex; align-items: center; gap: 1rem; }
.toolbar .actions { margin-left: auto; }
/* equal columns that wrap below 16rem */
.cards { display: flex; flex-wrap: wrap; gap: 1rem; }
.cards > * { flex: 1 1 16rem; }
/* sticky footer */
body { min-height: 100dvh; display: flex; flex-direction: column; }
main { flex: 1; }flex: 1 is flex: 1 1 0%: items share the space equally regardless of their content. flex: auto (1 1 auto) shares the free space after each item's content size.
Sources
Related pages
compare · cssCSS em vs rem: which unit to userem is relative to the root font size, so 1rem is the same everywhere; em is relative to the element's font size and compounds when nested. When to use each.compat · cssCSS :has() browser supportCSS :has() works in Chrome and Edge 105+, Safari 15.4+ and Firefox 121+, per MDN browser-compat-data. Feature-detect it with @supports selector(:has(a)).changes · tailwindcssTailwind CSS v3 to v4: renamed utilities and breaking changesTailwind CSS v4 moves config into CSS with @import and @theme, splits the PostCSS plugin and CLI, renames shadow, blur and rounded scales, needs Safari 16.4.