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
Controls
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.
Frequently Asked Questions (FAQ)
Which flexbox properties can I try in the live preview?
You can adjust flex-direction, justify-content, align-items, flex-wrap, gap, the number of demo boxes, and a toggle that applies flex-grow: 1 to every item.
How do I copy the CSS from this cheat sheet?
Click any value button to apply the rule and copy it, or use the Copy Full CSS button to copy the full generated snippet with one click.
How do I center items vertically in a flex row?
Keep flex-direction on row and set align-items to center. The quick reference on the page recommends center for vertical centering in a row, and stretch to fill the container height.
What does the gap property do?
Gap adds space between flex items. The quick reference on the page calls it the modern, clean way to space items, replacing margins for spacing.