CSS Flexbox generator

One-dimensional, content-first layout

Flexbox lays items out along a single axis — a row or a column — and sizes them from their content outward. That makes it the natural fit for components rather than page skeletons: toolbars, button groups, nav bars, a media object with an avatar beside text, or any "space these out and vertically centre them" job. Compared with the floats and inline-block hacks it replaced, it centres on both axes and fills remaining space natively — no clearfix, no whitespace bugs. The mental model that unlocks every property is the main axis (set by flex-direction) and the perpendicular cross axis; each alignment property targets one or the other.

The container properties this tool sets

justify-content distributes items along the main axis (start, centre, or space-between for nav bars); align-items positions them on the cross axis (center is the one-line vertical-centre everyone wants). flex-wrap lets items flow onto new lines instead of overflowing or crushing — pair it with gap, which finally gives flex rows and wrapped lines consistent spacing without margin hacks. flex-direction flips the whole thing between row and column, which is how one desktop toolbar becomes a stacked mobile menu with a single property change.

Per-item sizing — and when to switch to Grid

The three per-item properties are best hand-edited alongside the layout: flex-grow (how greedily an item claims spare space), flex-shrink (how readily it gives space back) and flex-basis (its starting size before grow/shrink runs). The shorthand flex: 1 means "grow and shrink equally from a zero basis" — the usual way to make columns share width evenly. Reach for CSS Grid the moment you need rows and columns to align together: flexbox aligns one line at a time and can't keep independent rows locked into a tidy matrix.