CSS Flexbox Cheat Sheet
A reference for CSS Flexbox, the container properties (flex-direction, justify-content, align-items, gap) and the item properties (flex, flex-grow, align-self), with what each value does.
A reference to CSS Flexbox, the one-dimensional layout model. Set properties on the flex container to control the row or column, and on the flex items to control how each one sizes and aligns. Click any value to copy it.
Container properties
| Property | What it does |
|---|---|
display: flex | Turn an element into a flex container |
flex-direction: row | Lay items out left to right (row-reverse, column, column-reverse) |
justify-content: center | Align items on the main axis (flex-start, flex-end, space-between, space-around, space-evenly) |
align-items: center | Align items on the cross axis (stretch, flex-start, flex-end, baseline) |
flex-wrap: wrap | Let items wrap onto new lines (nowrap, wrap-reverse) |
align-content: center | Align wrapped lines when there is extra space |
gap: 1rem | Space between items (row-gap / column-gap) |
Item properties
| Property | What it does |
|---|---|
flex: 1 | Shorthand for grow, shrink, and basis (1 1 0) |
flex-grow: 1 | How much spare space an item takes (0 = no grow) |
flex-shrink: 1 | How much an item shrinks when space is tight |
flex-basis: 200px | The starting size before grow/shrink apply |
align-self: flex-end | Override the container's align-items for one item |
order: 2 | Change source order (default 0) |
Tip: to center a single child both ways, on the parent use
display: flex, justify-content: center, and
align-items: center. Remember justify-content runs along the row and
align-items runs across it.
What this does
A CSS Flexbox cheat sheet lists the container properties like flex-direction, justify-content, align-items, and gap, and the item properties like flex and align-self, with what each value does.
How to use it
- Browse by property.
- Find the value you need.
- Copy it with one tap.
- Paste it into your stylesheet.
Example
display: flex; justify-content: center; align-items: center; centers a child both ways.
Sources & methodology
Last updated .
Frequently asked questions
Flexbox or grid — when do I use which?
Use Flexbox for one-dimensional layouts, a row or a column of items that wrap and size themselves. Use grid for two-dimensional layouts with rows and columns.
How do I center something with Flexbox?
On the parent, set display: flex, justify-content: center, and align-items: center. The first controls the main axis, the second the cross axis.
What does flex: 1 mean?
It is shorthand for flex: 1 1 0, so the item grows and shrinks and starts from a zero base size, making flex items share spare space equally.
Related tools
Git Cheat Sheet
The Git commands you use every day, setup, the add/commit/push workflow, branching and merging, working with remotes, and undoing mistakes safely.
Docker Cheat Sheet
A reference for everyday Docker, building and tagging images, running and managing containers, ports and volumes, system cleanup, and Docker Compose.
Vim Cheat Sheet
A reference for the Vim editor, modes, moving around, editing, search and replace, and saving or quitting, including the escape hatch for when you are stuck.
Regex Cheat Sheet
A regular-expression reference, character classes, anchors, quantifiers, groups and alternation, lookarounds, common ready-made patterns, and flags.