CSS flexbox generator
Adjust flex properties and see the layout update live, then copy the CSS.
CSS flexbox generator
Build a CSS flexbox layout visually and copy the code. Adjust flex-direction, justify-content, align-items and gap, and watch three demo boxes rearrange live in the preview.
Flexbox in a nutshell
Set display: flex on a container. flex-direction sets the main axis (row or column); justify-content aligns items along it; align-items aligns them across it; gap adds spacing between items. It’s the go-to tool for one-dimensional layouts like navbars, toolbars and card rows.
Frequently asked questions
What’s the difference between justify-content and align-items? justify-content works along the main axis; align-items works on the cross axis.
When should I use flexbox vs grid? Flexbox for one-dimensional layouts (a row or a column); grid for two-dimensional layouts.