About this tool
Flexbox is the backbone of modern CSS layout, but its properties are hard to remember until you have seen them in action. This generator turns flex-direction, justify-content, align-items, flex-wrap and gap into simple controls, with a row of real items that rearrange the instant you change anything.
It is the fastest way to understand how the properties interact — and when the layout looks right, copy the container CSS. Everything runs in your browser.
Frequently asked questions
Does this generate CSS for the container or for individual items?
It generates the parent container's flex properties (flex-direction, justify-content, align-items, flex-wrap, gap) — per-item properties like flex-grow or order aren't covered.
What's the difference between justify-content and align-items?
justify-content controls spacing along the main axis (horizontal in a row layout), while align-items controls alignment along the cross axis (vertical in a row layout).
Do I need vendor prefixes for flexbox in modern projects?
No, all current browsers support unprefixed flexbox properties; the old -webkit-box / -ms-flexbox syntax is only needed for browsers over a decade old.
Is my layout data uploaded anywhere?
No. The preview and generated CSS run entirely in your browser — nothing is sent to a server.
Why don't the gap values apply in some old browsers?
The gap property inside flex containers is supported by all browsers released after 2021; for older browsers, use margins on the items instead.