Flexbox generator that tells you when a property is doing nothing
Set up a flex container, add items, give each one its own grow, shrink, basis, order and align-self, and copy the CSS. The preview is a real flex container with your real properties on it, not a drawing of one — so when a setting has no effect, you watch it have no effect. That is the failure mode flexbox actually has: it never rejects anything, it just quietly ignores some of what you write, and nothing in the console or devtools tells you which. This page names those cases as you create them.
- Nothing is uploaded or saved
- Works offline
Main axis horizontal — justify-content moves items along itCross axis vertical — align-items moves them across it
These are the values every flex item already has, which is why flex: initial appears in almost no stylesheet — the output leaves the whole declaration out rather than restating the default.
.container {
display: flex;
gap: 12px;
}The other layout and CSS tools here: lay out in two dimensions with CSS Grid, build a layered box-shadow and build a gradient.
How it works
- 1
Start from a layout you recognise
A navbar, three equal columns, a fixed sidebar beside a fluid main, wrapping cards, one item dead centre. Each preset is a real answer to a real layout rather than a demo of a property, and each one is a starting point you then take apart. The last preset is deliberately broken in the way flexbox breaks — it sets align-content on a container that cannot wrap.
- 2
Watch which axis is which
The line above the preview names the main axis and the cross axis for your current flex-direction, and it changes when you do. This is worth more than it looks: justify-content works along the main axis and align-items across it, so both of them swap meaning the moment you switch from row to column. justify-content: center centres horizontally in a row and vertically in a column, and there is nothing in either property name that says so.
- 3
Give each item its own three numbers
Click an item in the preview or in the Items panel and it becomes the one you are editing. flex-grow decides how spare space is handed out, flex-shrink how a shortfall is taken back, and flex-basis what size the item starts at before either happens. Underneath, the page tells you whether your three values have a keyword — because most CSS in the wild is written as the keyword, and the keywords hide what they actually mean.
- 4
Read the warnings, they are not style advice
Every warning on this page is a case where the browser accepts your CSS and does nothing with it. There is no linter that catches these, because nothing is wrong: the property is spelled correctly, its value is legal, and it sits in devtools looking entirely fine. align-content on a nowrap container is the common one. flex-basis: 0 with flex-grow: 0 is the one that makes an item vanish.
- 5
Copy CSS that leaves out the defaults
The output prints display, then only the properties you actually changed. flex-wrap: nowrap and align-items: stretch are what the browser does anyway, and shipping them buries the two lines that matter under four that do not. align-content is also left out whenever flex-wrap is nowrap — printing a rule that cannot take effect would put the exact bug this page warns about into your stylesheet.
Frequently asked questions
Why does align-content do nothing on my flex container?
Because flex-wrap is nowrap, which is the default. align-content positions rows of items against each other, and a container that cannot wrap has exactly one row, so there is nothing to position. It is not an error and nothing warns you — the declaration is valid, it applies, and it has no effect. The property you almost certainly want is align-items, which moves items within their row. Load the "align-content that does nothing" preset above, then switch flex-wrap to wrap and watch the same value suddenly start working.
What is the difference between flex: 1 and flex: auto?
flex: 1 is shorthand for 1 1 0%, and flex: auto is shorthand for 1 1 auto. The grow and shrink are identical; the basis is what differs, and it changes everything. With basis 0 the item forgets its content size entirely, so items share the whole container equally and come out the same width no matter how much text each one holds. With basis auto the item starts at its content size and only the leftover space is shared, so a long item stays wider than a short one. Load the "Equal columns" preset — the three items hold different amounts of text and are the same width — then set each basis to auto and watch them go uneven.
Why will my flex item not shrink below a certain size?
Because min-width on a flex item defaults to auto, not to 0. That means an item will not be shrunk smaller than its own content, no matter what flex-shrink says — a long unbroken string or a wide child element sets a floor, and the item pushes past the container instead of getting narrower. The fix is min-width: 0 on the item, or min-height: 0 in a column, and there is a toggle for it in the item editor. This is the single most-asked flexbox question and the answer is not a flex property at all, which is exactly why it is hard to find.
When should I use flexbox and when should I use grid?
Flexbox lays out along one axis and lets the content decide the sizes; grid lays out on two axes and lets you decide the sizes first. A row of navbar items, a toolbar, a stack of form rows, a set of tags that wrap — those are flexbox, because you care about the order and the spacing and not about anything lining up with a row above. A page skeleton, a photo gallery where every gutter lines up, anything where a column in one row must match the column below it — that is grid, and the grid generator on this site validates the part of it that fails silently. The two are not rivals and most real pages use both, usually grid for the page and flex inside the pieces.
Does gap work in flexbox, or is that grid only?
It works. gap was part of grid first and arrived in flexbox later, which is why a lot of older advice still tells you to use margins on the children and then strip the margin off the last one with :last-child. You no longer need any of that. This page writes row-gap and column-gap as a single gap shorthand when they match and as two values when they do not, and it leaves the property out entirely when both are zero.
What does order actually do, and should I use it?
order changes the position an item is painted in without changing where it sits in the HTML. It is genuinely useful for one thing: rearranging a layout at a different screen width when the source order is right for one and wrong for the other. It is also a real accessibility hazard, because keyboard focus and screen readers follow the DOM, not the painted order. Someone tabbing through a form whose fields have been visually reordered gets them in a sequence that does not match what they see. Use it for layout, never to fix an order that should have been correct in the markup.
Why is the preview a real flex container rather than a drawing?
Because a drawing would lie in exactly the place this page is about. If the preview simulated flexbox, it could show align-content working on a nowrap container — the simulation would have no reason not to — and the page would be teaching you something your browser will not do. Every property here is set on a real element and handed to the browser as written, including the ones that will be ignored, so what you see is what your stylesheet will get. It is the same reason the grid generator on this site draws through explicit grid-area rather than through grid-template-areas.
Is anything I type here uploaded or saved?
No. The layout is held in this page while it is open and nowhere else — there is no request of any kind, no localStorage, and no URL parameter, so the page works with the network switched off and forgets everything when you close the tab. That also means there is no saved state to come back to: copy the CSS out before you leave.
The CSS output uses :nth-child. Can I use my own class names instead?
Yes, and you probably should for anything that lives longer than an afternoon. The selector box lets you set the container selector, and the item rules are generated as child positions because this page does not know what you would call them. In your own stylesheet, give the items real class names that say what they are — .sidebar and .main read correctly a year later, while :nth-child(2) silently means something different the moment someone inserts an element above it.