Flexbox Generator_
Every flexbox generator shows you the layout. None of them shows you why it breaks. Two defaults account for most real flexbox bugs and neither is visible in a preview: flex: 1 means a basis of zero rather than auto, and a flex item's min-width is auto, so it will not shrink below its own content no matter what you tell it.
So this one narrows the container while you work — shrinking and wrapping cannot be seen at a fixed width — and says what will go wrong before it does.
- Input
- Container and item properties, or one of seven layouts taken from what people actually build.
- Output
- The CSS with every property still at its initial value omitted, and matching HTML with the same class names.
- Processing
- Applied to real elements in this tab, so the preview is the browser's own flex algorithm rather than a drawing of it.
- Limits
- The preview shows boxes with text in them. Real content brings intrinsic sizes, images and nested flex containers, which is exactly where the min-width default starts to matter.
- Why flex: 1 and flex: 1 1 auto are not the same
- A bare number in the flex shorthand sets flex-basis to 0%, not auto. With a basis of zero the whole width is divided between the items and they come out equal; with a basis of auto each item starts at its content width and only the leftover space is shared, so they do not. This one line of the specification is behind most "why are my columns uneven" questions.
Two defaults cause most flexbox bugs
A flex item will not shrink below its content
The initial min-width of a flex item is auto, not zero — which means its automatic minimum size, roughly the width of its longest unbreakable content. Give it flex-shrink: 1, narrow the container, and it stops shrinking the moment it reaches that floor and pushes through the container instead. One long URL, a <pre> block, a table, or a nested flex container will do it. The fix is min-width: 0 on the item that should give way, and it is the single most common missing declaration in flexbox layouts. In a column it is min-height: 0 instead, because the rule follows the main axis. Two things worth knowing alongside it: the automatic minimum applies only while overflow is visible, so overflow: hidden or auto disables the whole behaviour and is the fix people usually stumble into without knowing why it worked — and letting the item shrink does not tell the text where to go, so a long word still spills unless something like overflow-wrap: break-word handles it.
flex: 1 sets the basis to zero
The shorthand's one-value form is defined so that a bare number sets grow, leaves shrink at 1, and sets the basis to 0%. So flex: 1 expands to 1 1 0% and flex: auto expands to 1 1 auto — the same grow and shrink, a completely different result. From a basis of zero every item starts at nothing and the container's whole width is divided evenly. From a basis of auto every item starts at its content width and only what is left over gets shared, so a column with more text in it ends up wider. Both are useful; only one of them makes equal columns.
flex-basis beats width
On a flex item along the main axis, flex-basis takes precedence over width. Setting a width on an item that already has flex: 1 does nothing at all, which is a deeply confusing thing to debug because the declaration is right there in the inspector and not crossed out. The exception is flex-basis: auto, which defers to width — so flex: 0 0 auto plus a width behaves as expected while flex: 1 plus a width ignores it.
The axes swap under you
justify-content works along the main axis and align-items along the cross axis, and flex-direction decides which is which. Change to a column and justify-content becomes vertical while align-items becomes horizontal. Nothing in the property names says so, which is why "centre it" so reliably produces movement on the wrong axis. The labels above change as you switch direction, for that reason.
Reordering is a visual change only
order, row-reverse and column-reverse change what is painted and leave the document alone. Keyboard focus still moves in source order, screen readers still read in source order, and text still copies in source order — so a page can look like one sequence and behave like another. WCAG 1.3.2 asks for the meaningful sequence to be programmatically determinable, and this is the property that breaks it. Reorder the markup where the order carries meaning; use these where it does not.
When grid is the better answer
Flexbox lays out along one axis and lets content sizes decide the distribution. Grid lays out along two at once and lets the container decide. The practical test: if you find yourself setting a basis on every child so that the columns line up, you want grid, because you are describing a track structure and flexbox has no concept of one — items on the second line of a wrapped flex container do not align with the first. If instead you want a row of things to sit sensibly next to each other with whatever widths they happen to need, flexbox is doing exactly what it was designed for, and gap now works in both.
Build it, narrow it, then copy
- 01Start from a preset. Hovering one says what it is for and which property is doing the work.
- 02Narrow the container with the slider. Shrinking and wrapping do not exist at full width, which is why a fixed preview makes flex-shrink look broken.
- 03Turn on the long word. It is the fastest way to see the min-width default, and to see min-width: 0 fix it.
- 04Read the notes. They fire on the things a preview cannot show — a dead property, an axis you did not mean, a reorder that breaks tab order.
- 05Copy the CSS and the HTML. Class names match, and every property still at its initial value is left out.
A sidebar that keeps getting squashed
The content next to it contains something long, and instead of that content wrapping, the fixed sidebar shrinks — or the whole row overflows.
.sidebar { flex: 0 0 240px; }
.content { flex: 1; }.content {
flex: 1;
min-width: 0;
}Columns that will not come out equal
Three columns, one with more text, and it ends up wider than the other two however many times the CSS is checked.
flex: 1 1 auto; /* starts at content width */
flex: 1; /* = 1 1 0% — starts at zero */
A width that the browser ignores
The declaration is there in the inspector, not crossed out, and has no effect whatsoever.
.item {
flex: 1;
width: 200px;
}flex-basis is 0% and beats width. Use flex: 0 0 200px instead.
A layout that tabs in the wrong order
Visually the call to action comes first. Keyboard users reach it last, and a screen reader reads the page in the original sequence.
.cta { order: -1; }Focus and reading order still follow the DOM. Move the markup where the order means something.
The flex shorthand, expanded
| You write | It means | What that does |
|---|---|---|
flex: 1 | 1 1 0% | Starts from nothing and takes an equal share. This is how equal columns are made. |
flex: auto | 1 1 auto | Starts from its content width and shares only the leftover. Wider content stays wider. |
flex: initial | 0 1 auto | The default. Will not grow, will shrink, sized by content. |
flex: none | 0 0 auto | Rigid. Neither grows nor shrinks — what a fixed sidebar or an avatar wants. |
flex: 2 | 2 1 0% | Twice the share of an item with flex: 1, because both start from zero. |
flex: 1 200px | 1 1 200px | At least 200px, then grows. With wrap, a responsive grid with no media query. |
flex: 0 0 240px | 0 0 240px | Exactly 240px, always. The only reliable way to fix a flex item's size. |
A bare number setting the basis to 0% rather than auto is the single most consequential line of the flexbox specification, and the one most often assumed to say the opposite.
Working with flexbox
- Add min-width: 0 to any flex item that holds text and is meant to shrink. It costs nothing when it is not needed and fixes the overflow before it happens.
- Use gap instead of margins on children. It has been supported in flexbox everywhere since 2021, and it removes the last-child margin reset entirely.
- Reach for flex: none rather than a width when an item must not change size. A width on a flexible item is ignored along the main axis.
- Set flex-shrink: 0 on anything that must not be squashed — icons, avatars, badges. Shrinking is on by default and it catches people out far more often than growing does.
- Prefer grid when you are describing tracks. Wrapped flex lines do not align with each other, and no amount of basis arithmetic will make them.
- Test at a narrow width before shipping. Most flexbox bugs only exist below some threshold, and a desktop preview never reaches it.
Where flexbox goes wrong
min-width: auto is why your item overflows
A flex item cannot shrink past its automatic minimum size, so one long word or a nested flex container pushes through the container rather than wrapping. min-width: 0 — or min-height: 0 in a column — is the fix, and nothing in the CSS you wrote hints that it is missing.
align-content does nothing on a single line
It distributes the lines of a wrapped container. With flex-wrap: nowrap there is only one line and the property has no effect at all, which is usually diagnosed as the property being broken rather than as the wrap being missing.
justify-content needs free space to distribute
If every item has a positive flex-grow they have already absorbed all of it, and space-between has nothing left to space. The property is working; there is simply nothing for it to do.
Percentage bases do not account for gap
Three items at 33.33% plus any gap at all will not fit on one line, because the gap is added after the percentage is resolved against the container. calc(33.33% - 1rem) is the usual correction, and it is why grid with fr units is easier here.
Visual order is not focus order
order and the -reverse directions change only what is painted. Tab order, screen reader order and copied text all still follow the DOM, so a reordered layout can be unusable by keyboard while looking perfectly correct.
Properties, defaults and support
- Container
- display, flex-direction, flex-wrap, justify-content, align-items, align-content, and gap. The initial values are row, nowrap, flex-start, stretch and stretch — this page omits every one of them from the output.
- Item
- flex-grow, flex-shrink, flex-basis (usually through the flex shorthand), align-self and order. The defaults are 0, 1 and auto, which is flex: initial.
- The shorthand
- CSS Flexbox §7.1.1. A single number sets grow with a basis of 0%; a single length sets the basis with grow and shrink at 1; the keywords initial, auto and none expand to 0 1 auto, 1 1 auto and 0 0 auto.
- Minimum size
- A flex item's min-width and min-height are auto rather than 0, resolving to the automatic minimum size along the main axis. This is deliberate — it stops content disappearing — and it is the cause of most overflow.
- Gap
- Supported in flexbox in every current browser since 2021 — Safari 14.1 was the last to arrive. The margin-on-children pattern it replaced needs no fallback now.
- Accessibility
- order and the reverse directions affect painting only. WCAG 1.3.2 Meaningful Sequence applies, and the notes above flag it whenever either is in use.
- Network
- None from tool code. A test sweep calls every function this page uses with
fetchandXMLHttpRequestreplaced by stubs that throw, so a stray request fails the build instead of shipping. Disconnect from the network and the page still works.
Questions about CSS flexbox
What is the difference between flex: 1 and flex: 1 1 auto?
The basis. flex: 1 expands to 1 1 0%, so every item starts from zero and the container's whole width is divided evenly — equal columns. flex: 1 1 auto starts each item at its content width and shares only the leftover space, so an item with more text in it stays wider. Same grow, same shrink, different result.
Why does my flex item overflow its container?
Because a flex item's min-width is auto, not zero. It cannot shrink below its own automatic minimum size — the width of its longest unbreakable content — so a long URL, a pre block or a nested flex container pushes straight through. Add min-width: 0 to the item that should give way, or min-height: 0 if the container is a column.
Why is width ignored on my flex item?
Because flex-basis takes precedence over width along the main axis, and flex: 1 sets the basis to 0%. The width is still there in the inspector and simply does not apply. Use flex: 0 0 200px, or set flex-basis to auto so that width is consulted again.
Why does align-content do nothing?
It positions the lines of a wrapped container relative to each other, and with flex-wrap: nowrap there is only ever one line. Set flex-wrap: wrap, or use align-items, which positions the items within their line.
How do I centre something with flexbox?
justify-content: center and align-items: center on the container centres on both axes at once. Which of the two is horizontal depends on flex-direction — in a column they swap, and that is the usual reason a centring attempt moves things the wrong way.
When should I use grid instead of flexbox?
When you are describing tracks. Grid lays out two dimensions at once and aligns columns across rows; flexbox lays out one and lets content sizes decide. The signal is setting the same basis on every child to make columns line up — at that point you want grid, since wrapped flex lines never align with each other.
Can I use gap with flexbox?
Yes, everywhere. Safari 14.1 was the last browser to ship it, in 2021, so the margin-on-every-child-then-reset-the-last pattern needs no fallback any more. It applies between items and between wrapped lines, not around the outside.
Does the order property affect accessibility?
Yes, and it is the main reason to be careful with it. order and the -reverse directions change painting only — keyboard focus, screen reader announcement and copied text all still follow the DOM. WCAG 1.3.2 requires the meaningful sequence to be determinable from the markup, so where order carries meaning, move the markup instead.
What does flex-shrink actually do?
It sets how much of any overflow an item absorbs, relative to the others, and it is 1 by default — so items shrink whether or not you asked them to. Setting it to 0 is how icons, avatars and fixed sidebars keep their size. Note that shrinking still stops at the automatic minimum size unless min-width: 0 is set.
Is the CSS built here sent anywhere?
No. The work is JavaScript running in this tab. Every function it calls is covered by a test that stubs fetch and XMLHttpRequest to throw, so a request that slipped in would break the build rather than reach a server — and you can confirm it for yourself by disconnecting and carrying on.