CSS Flexbox Generator
Click the layout, copy the CSS.
The six properties that matter
Every flexbox layout is a combination of six container properties: flex-direction (row/column), justify-content (distribution along the main axis), align-items (cross-axis alignment), flex-wrap (whether items break to new lines), gap (spacing — the modern replacement for margin hacks), and per-item flex-grow (how leftover space is shared). Set them here, see the result instantly, copy the CSS.
The most common beginner confusion: justify and align swap meaning when direction changes. With flex-direction: column, justify-content controls vertical spacing — flip your mental model, or just experiment in the preview until it looks right.
FAQ
When should I use Grid instead?
Flexbox is for one-dimensional layout (a row OR a column); Grid is for two-dimensional layout (rows AND columns simultaneously). Use the CSS Grid Generator for page scaffolding, flexbox for toolbars, cards and inline groups.
Why does my item not shrink below its content?
Items have min-width: auto by default. Add min-width: 0 to the item to allow true shrinking — a classic long-text-overflow-in-flex fix.