Build a display:flex layout with a live preview. Pick flex-direction, justify-content, align-items, flex-wrap and gap, then copy the ready-to-paste CSS.
Runs entirely in your browser — your data never leaves your device.
How to use CSS Flexbox Generator
What it does & when you need it
Flexbox is the workhorse of modern layout, but the property names are easy to mix
up — justify-content and align-items swap axes the moment you change
flex-direction, and the difference between space-around and space-evenly is
hard to picture from the words alone. This generator gives you a dropdown for each
property and a live container of numbered boxes that rearranges as you choose, so
you learn the behaviour by watching rather than guessing. It runs entirely in your
browser and copies a ready-to-paste display: flex block.
Reach for it when you are centring a card, spreading a navbar, building a
responsive button row, or simply trying to remember which property pushes items
apart along the main axis.
How to use
Pick a flex-direction — this sets the main axis to a row or a column.
Set justify-content to distribute items along the main axis and
align-items to position them on the cross axis.
Choose flex-wrap to allow items to spill onto new lines, and drag the
gap slider to space them.
Copy the CSS, or press Ctrl/Cmd + Enter.
Things worth knowing
The axes flip with the direction. With flex-direction: row,
justify-content moves items left-to-right and align-items moves them
top-to-bottom. Switch to column and the two swap roles. The live preview is the
fastest way to keep this straight.
Gap replaced margin hacks. The gap property spaces flex children without
the old first-child and last-child margin workarounds, and it is supported in
every current browser. A negative gap is invalid, so this tool clamps it to zero.
Once your container is set, size its children with the
CSS units converter or round their corners with the
border-radius generator.
Examples
Perfectly centered
row · center · center · nowrap · 12
Centers items on both axes — the classic recipe for a hero or a modal.
Spaced navbar row
row · space-between · center · nowrap · 24
Pushes items to the edges with space-between, ideal for a logo-and-links header.
Wrapping card grid
column · flex-start · stretch · wrap · 16
A stacked, wrapping column with a 16px gap between stretched items.
Frequently asked questions
What is the difference between justify-content and align-items?+
justify-content distributes items along the main axis and align-items positions them on the cross axis. The catch is that flex-direction decides which axis is which: with row the main axis is horizontal, but with column it becomes vertical, so the two properties swap visual roles. The live preview makes the difference obvious.
When should I use a row versus a column direction?+
Use row (the default) to lay items out left to right, such as a navbar or a button group, and column to stack them top to bottom, such as a form or a sidebar. The reverse variants flip the order, which is handy for right-aligned toolbars without changing the HTML.
What is the gap property and is it well supported?+
gap sets consistent spacing between flex items without the old margin-on-every-child-but-the-last workaround. It is supported in every current browser for flexbox. This tool clamps a negative gap to zero because a negative gap is invalid CSS.
What does flex-wrap do?+
By default flex items stay on one line and shrink to fit (nowrap). Setting wrap lets them flow onto new lines when they run out of room, which is what makes a responsive card grid or tag list behave. wrap-reverse stacks the new lines in the opposite direction.
Does this run in my browser?+
Yes. The CSS is generated locally as you change the controls, with no network request, so it works offline and nothing about your layout is uploaded.