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.
Example
To centre a child element both horizontally and vertically, search “center” and you get the recipe:
.parent {
display: flex;
align-items: center;
justify-content: center;
}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.
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.