Skip to main content
Ganesh Joshi
Back to Cheatsheets

CSS Flexbox

Updated 2026-02-09

Flexbox container and item properties. Direction, wrap, justify, align, and gap. One-page reference.

Container

display: flex; flex-direction: row | column | row-reverse | column-reverse; flex-wrap: nowrap | wrap; justify-content: start | center | end | between | around | evenly; align-items: start | center | end | stretch | baseline; gap: 1rem;

Items

flex-grow: 0 | 1; flex-shrink: 0 | 1; flex-basis: auto | 0 | 1rem; shorthand flex: 1 (grow 1 shrink 1 basis 0). align-self overrides align-items for one item.

CSS Flexbox | Cheatsheet | Ganesh Joshi