CSS Flexbox generator
Visualise flex-direction, justify-content, align-items, wrap and gap with a live preview.
Runs 100% in your browserHow to use the flexbox generator
- Choose the container behaviour. Pick direction, justify-content, align-items and wrap.
- Adjust gap and item count. Slide gap and add/remove items to preview real spacing.
- Copy the CSS. Click Copy to grab the container rule.
About flexbox
Flexbox is the right tool when you want a single row or column of items to lay themselves out
based on available space. Compared to floats and inline-block, it handles vertical centering and
"fill the remaining space" patterns natively. The container properties — direction, justify,
align, wrap, gap — are what this tool covers; per-item properties (flex-grow,
flex-shrink, flex-basis, align-self) are best edited by
hand alongside the layout.
Frequently asked questions
- A one-dimensional layout model — you control either the row or the column at a time. Compared to Grid (two dimensions), Flexbox is ideal for nav bars, button rows and dynamically-sized lists.
- Use flexbox when content drives layout in one direction (a row of cards that wraps). Use grid when you want explicit two-dimensional placement (a page layout with named regions).
- justify-content aligns items along the main axis (the flex-direction). align-items aligns them across the cross axis.
- Check flex-shrink (default 1 — items shrink) and min-width (default auto — items will not shrink below their content). Set min-width: 0 on items that should shrink past their content.