CSS Flexbox Cheat Sheet
Play with the controls below and watch the live preview update. Click any value button to copy the CSS rule, or use the big button to copy the full snippet.
Live Preview
1
2
3
4
5
Controls
flex-direction — main axis direction
Click a value to apply it and copy the rule.
justify-content — alignment on the main axis
Click a value to apply it and copy the rule.
align-items — alignment on the cross axis
Click a value to apply it and copy the rule.
flex-wrap — allow items to wrap to new lines
Click a value to apply it and copy the rule.
Quick reference
- flex-direction sets the main axis: row goes left to right, column goes top to bottom, and each has a reverse option.
- justify-content spreads items along the main axis. The space-* options distribute free space between, around, or evenly among items.
- align-items positions items on the cross axis. Use center for vertical centering in a row, or stretch to fill the container height.
- flex-wrap lets items move to a second line instead of shrinking when the container is too narrow.
- gap is the modern, clean way to add space between items — it replaces margins for spacing.
- flex-grow on an item makes it take up the leftover free space. Equal values mean equal widths.