Flexbox Generator
Build a CSS Flexbox layout visually. Adjust direction, alignment, wrapping, and gap — see the effect on a live preview, then copy the generated CSS. The fastest way to explore Flexbox behavior without opening devtools.
.container { display: flex; gap: 8px; }
About Flexbox Generator
Flexbox has been the go-to layout system for one-dimensional layouts since 2015 — rows of nav items, columns of form fields, centered content, distributed toolbars. But the interaction between flex-direction, justify-content, align-items, and align-content is famously non-intuitive: the axis meanings swap when you change direction, and align-content only does something when wrap is on. This visual Flexbox Generator makes those relationships tangible: change any property and see the effect instantly on a preview with 1-12 items.
The tool is deliberately focused on the container-level properties (display: flex, direction, wrap, justify, align, gap). Individual item properties (flex-grow, flex-shrink, flex-basis) are separate concerns best handled per-item in your own CSS. Ideal for developers learning Flexbox, designers building responsive layouts, and anyone stuck troubleshooting why their existing flex layout is not doing what they expect — set up the same properties here to see what SHOULD happen. The generated CSS is minimal and includes only the properties that differ from Flexbox defaults, keeping your final stylesheet clean.
How to Use
Pick a flex-direction — row (horizontal), column (vertical), or reversed variants.
Set justify-content to control alignment along the main axis (spacing between items).
Set align-items to control alignment on the cross axis (vertical for row, horizontal for column).
Enable flex-wrap when you want items to wrap onto multiple lines instead of shrinking.
Adjust gap for uniform spacing and item count to test with more/fewer items.
Copy the generated CSS and paste it into your project.
Frequently Asked Questions
What is the difference between justify-content and align-items?
In a row (default) layout: justify-content controls horizontal spacing, align-items controls vertical alignment. In a column layout, they swap — justify-content becomes vertical, align-items becomes horizontal. The rule is: justify-content = main axis, align-items = cross axis, where the main axis is determined by flex-direction.
When should I use flex-wrap?
Use flex-wrap when your items should wrap to a new line when they run out of space — like tag lists, card grids, or navigation with many items. Without wrap (the default), flexbox shrinks items to fit on one line, which can crush content. wrap-reverse is rare but useful for RTL layouts or specific visual effects.
What is the difference between space-between, space-around, and space-evenly?
space-between: no space at the edges, equal space between items. space-around: half-space at the edges, full space between items. space-evenly: equal space everywhere — between items and at edges. space-evenly is usually what people intuitively want; space-between is best for edge-to-edge distribution like navbar items.
Does align-content do anything when flex-wrap is disabled?
No. align-content only applies when there are multiple flex lines (i.e., wrap is enabled and items are actually wrapping). With a single line, align-items handles cross-axis alignment. This tool disables align-content when wrap is nowrap for that reason.
How do I make items grow to fill space?
This tool generates the CONTAINER properties. To make individual items flex, add flex: 1 (or flex-grow: 1) to the child in your own CSS. flex: 1 makes an item expand to fill available space; flex: 2 makes it take twice as much as siblings with flex: 1.