CSS Flexbox Generator
Experiment with justify-content, align-items, direction and gap on a live row of items, then copy the CSS.
.container {
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: row;
gap: 10px;
}
Flexbox is far easier to understand when you can see it move. This tool gives you a live flex container of sample items and four controls — justify-content, align-items, flex-direction and gap — so you can watch the layout rearrange as you change each one, then copy the CSS it produces. It's equally useful as a quick builder and as a way to finally get the two flex axes straight in your head. Everything runs in your browser.
The controls, and the axis they act on
justify-content spaces items along the main axis and offers flex-start, flex-end, center, space-between, space-around and space-evenly. align-items positions them on the cross axis with flex-start, flex-end, center, stretch and baseline. flex-direction (row, row-reverse, column, column-reverse) decides which axis is which — the reason changing it can make justify and align appear to swap. A gap slider (0–60px) sets the space between items.
The CSS it writes
The output is a clean rule for a class called .container with display: flex and your four chosen properties. Because the preview applies exactly those declarations to a real element, what you see is what the copied code will do on your own page. Change the class name to fit your project and drop it into your stylesheet.
Frequently Asked Questions
Why does align-items look like it stops working when I switch to column?
Flex properties act on axes, not fixed directions. Setting flex-direction to column swaps the main and cross axes, so justify-content and align-items trade roles — the tool lets you see this happen live.
What does the stretch option do?
align-items: stretch makes items grow to fill the container on the cross axis (for a row, that means matching heights) when they have no fixed size of their own.
What gap range can I set?
The gap slider runs from 0 to 60 pixels and adds even spacing between the flex items using the CSS gap property.
Is this the same as a grid generator?
No. Flexbox lays items out along a single axis at a time, which suits rows or columns of content. For two-dimensional row-and-column layouts, a CSS Grid generator is the better fit.