Flexbox Generator
Set up a flex container and its items with visual controls, watch the layout react live, and copy the CSS in one click.
Your layout is built right in your browser. Nothing you set here is uploaded to BroBroGo.
FAQ
What is the difference between justify-content and align-items?
Justify-content spaces the items along the main axis — the direction the row or column flows — while align-items positions them across the other axis. Switch the direction from row to column and the two axes swap, so justify-content starts working top to bottom and align-items left to right.
How do the per-item controls work?
Pick an item by its number, then set how much it grows to fill spare space, how much it shrinks when space is tight, its starting size (basis) and its own cross-axis alignment. Order moves an item earlier or later on screen without touching the HTML. Only the items you actually change get their own rule in the CSS.
When do wrap and align-content matter?
With wrapping off, every item is forced onto one line and can be squeezed narrower. Turn it on and items that no longer fit drop to the next line — that is when align-content takes over, spacing the lines as a group. Gap sets the space between items, and between lines, without margins.