This is a searchable CSS flexbox cheatsheet covering the properties you actually use day to day, with a plain description of what each one does and copy-ready CSS. It is grouped into container setup, main-axis alignment (justify-content), cross-axis alignment (align-items), item sizing (grow, shrink, basis) and common recipes — so you can stop hunting through documentation mid-task.
How it works
The reference is organised by the part of the flexbox model each property affects. Container properties like display: flex, flex-direction and flex-wrap set up the flex context and main axis. justify-content aligns items along the main axis, while align-items aligns them along the perpendicular cross axis. Item properties (flex-grow, flex-shrink, flex-basis and the flex shorthand) control how individual children size themselves. You can search by property name or by intent — type “center”, “wrap” or “grow” — and copy the exact CSS.
Container property quick reference
| Property | Values (common) | What it does |
|---|---|---|
flex-direction | row column row-reverse column-reverse | Sets the main axis direction |
flex-wrap | nowrap wrap wrap-reverse | Controls whether items wrap to new lines |
justify-content | flex-start center flex-end space-between space-around space-evenly | Distributes items along the main axis |
align-items | stretch flex-start center flex-end baseline | Aligns items on the cross axis |
align-content | flex-start center space-between … | Aligns multiple lines (only when wrap creates them) |
gap | any length | Space between items; shorthand for row-gap and column-gap |
Item property quick reference
| Property | Values | What it does |
|---|---|---|
flex-grow | number (default 0) | How much to grow relative to siblings |
flex-shrink | number (default 1) | How much to shrink relative to siblings |
flex-basis | auto or a length | Hypothetical size before flex-grow/shrink apply |
flex | 1 auto none or three values | Shorthand for grow, shrink, basis |
align-self | same as align-items | Per-item override of the container’s align-items |
order | integer | Visual order; does not change DOM order |
Common recipes
Perfect center (the classic flexbox win):
.container {
display: flex;
justify-content: center;
align-items: center;
}Equal-width columns that fill the row:
.container { display: flex; }
.item { flex: 1; }Sidebar layout (fixed sidebar, flexible main):
.layout { display: flex; }
.sidebar { flex: 0 0 240px; }
.main { flex: 1; }Wrap cards with even spacing:
.grid {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.card { flex: 1 1 280px; }Tips and notes
justify-content: center centres on the main axis and align-items: center on the cross axis, so the child sits dead centre regardless of its size. When flex-direction is column, these axes swap — justify-content becomes vertical and align-items becomes horizontal. Search by property name or by what you want to do — “center”, “wrap”, “grow” — and copy the exact CSS into your stylesheet. Everything runs in your browser; nothing is uploaded.