ColorKitFree CSS flexbox generator
Flexbox generator that shows where the space went
Free, no signup: change any of the six container properties or the four per-item ones and real boxes rearrange in the same frame, at a container width you drag between 240 and 920 pixels. Under the preview a table names the free space on each flex line and reports what the grow and shrink passes did to every item in pixels, which is the part a preview hides — it is also why an item with flex-grow: 2 is almost never twice the size of its neighbor. Copy CSS gives you the container rule and a numbered rule per item using the three-value flex shorthand.
- 100% free
- No signup
- Up to 6 items
- 24 keyword values
- Resolved size per item
Container
align-content is greyed out because it positions lines against each other, and nowrap only ever produces one line.
Items (3 of 6)
| # | grow | shrink | basis | content | align-self | |
|---|---|---|---|---|---|---|
| 1 | ||||||
| 2 | ||||||
| 3 |
content is the item's intrinsic main size in the preview, and it is also what a flex-basis of auto resolves to.
Where the space went
160.0px of free space to divide by the grow factors.
| Item | Basis | Change | Resolved |
|---|---|---|---|
| 1 | 120px | +53.3px | 173.3px |
| 2 | 96px | +106.7px | 202.7px |
| 3 | 160px | — | 160.0px |
The table runs the distribution without the automatic min-content floor, so an item can read below its content size here while the preview refuses to go that far. Tick min-width: 0 to remove the floor and make the two agree.
CSS
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
gap: 12px;
}
.flex-item-1 {
flex: 1 1 auto;
}
.flex-item-2 {
flex: 2 1 auto;
}
.flex-item-3 {
flex: 0 1 160px;
}How to build a flex row
Three passes: the container, the items, then the numbers that explain the result.
Set the container, then drag its width
Pick a flex-direction, a wrap mode and the alignment pair, and set the gap in pixels. The slider above the preview sets the container's main-axis size between 240 and 920 pixels — it becomes a width in the two row directions and a height in the two column directions, because the main axis is what the direction chooses. Sliding it is the fastest way to find the width where your row stops fitting.
Give each item its triple
Every item gets flex-grow, flex-shrink and flex-basis of its own, plus a content size that stands in for whatever the item really holds. Leave the basis on auto and the content size is what the browser measures; switch it to pixels and the content size becomes the min-content floor instead, which is the difference that produces most surprise overflow. You can add items up to six and give any of them an align-self that overrides the container.
Read where the space went, then copy
The table under the controls names the free space on each flex line and shows, per item, the basis it started from, how many pixels the grow or shrink pass added or removed, and the size it settled at. When the numbers disagree with the preview it is the min-content floor doing it, and the min-width switch removes the floor so the two agree. Copy CSS emits the container rule plus one numbered rule per item.
Technical specifications
| Container properties | flex-direction, flex-wrap, justify-content, align-items and align-content, plus gap — 24 keyword values across the five, and 0-64px on the gap |
|---|---|
| Item properties | flex-grow and flex-shrink from 0 to 10 in steps of 0.1, flex-basis as auto or 0-600px, align-self across 6 values, and a content size of 20-320px |
| Items | 1 to 6, added and removed one at a time; every item is numbered in the emitted CSS |
| Container main size | 240px to 920px on the slider, applied as width under row and row-reverse and as height under column and column-reverse |
| Distribution model | CSS Flexible Box Layout Level 1 — line collection from §9.3 on hypothetical main sizes, then free space resolved by §9.7: grow ratio when positive, shrink × basis when negative |
| Known divergence | The table omits the automatic min-content floor that the preview obeys; the min-width switch removes the floor so both agree |
| Output | One container rule and one .flex-item-n rule per item, each using the three-value flex shorthand rather than three separate declarations |
| Data handling | Layout is done by your browser's own flex engine and the table by arithmetic beside it; nothing is uploaded and no state is kept, so a reload restores the three starting items |
Frequently asked questions
Why is an item with flex-grow: 2 not twice as wide as one with flex-grow: 1?
Because grow divides the free space, not the container. Each item starts at its flex basis, the browser subtracts every basis and every gap from the container to get the leftover, and only that leftover is shared out in the ratio you wrote. Put two items with bases of 100px and 300px in a 500px box and there are 100px to share: give the narrow one flex-grow: 2 and the wide one flex-grow: 1 and they finish at 166.7px and 333.3px, so the larger grow factor ends up half the size of its neighbor. Set both bases to 0 and the ratio finally describes the whole width, which is exactly what flex: 2 and flex: 1 do.
What is the difference between flex: 1, flex: auto and flex: 1 1 auto?
flex: 1 expands to 1 1 0%, while flex: auto expands to 1 1 auto — the third value is the one that matters. With a basis of 0 the content is ignored during distribution and every such item ends the same size, which is how you get equal columns. With a basis of auto the content is measured first and long items keep more room, which is how you get columns that are proportional to what is inside them. Writing flex: 1 1 auto spells out the second behavior, and it is not what the bare flex: 1 does.
Why will my flex item not shrink below its text?
Flex items get min-width: auto rather than min-width: 0, and the automatic value resolves to the item's min-content size. A paragraph's min-content size is its longest word, and a nested flex row's is the sum of its own children, so the item hits a floor and pushes past the container instead of shrinking. Setting min-width: 0 on the item removes the floor, and so does overflow: hidden or overflow: auto, because a scroll container has no min-content contribution to protect. In column directions the property to set is min-height: 0.
Does flex-basis override width?
On the main axis, yes: any flex-basis other than auto wins over width in a row and over height in a column. When flex-basis is auto the item falls back to width or height, and when both are auto it falls back to the content size. The cross axis is untouched by basis, so width still applies normally in a column layout. Box sizing follows the box-sizing property either way, so a 200px basis on a border-box item includes its padding and borders.
Can I rely on gap in flexbox?
Yes in every current engine, but it arrived far later for flexbox than for grid. Firefox 63 shipped it in October 2018, Chrome and Edge in version 84 in July 2020, and Safari only in 14.1 in April 2021. Anything older needs the old approach of margins on the items plus a negative margin on the container, which is why so much existing code still looks like that. The generator writes gap, since the browsers that lacked it are long out of support.
Is the order property safe to use for rearranging items?
It moves the boxes and leaves everything else where it was, which makes it unsafe for anything a keyboard user has to follow. Tab order, screen-reader reading order and the order copy is spoken in all come from the DOM, so an order value that visually moves the third item to the front produces a page whose focus ring jumps backwards. WCAG 2.1 calls this out under 1.3.2 Meaningful Sequence and 2.4.3 Focus Order. Use it for cosmetic reshuffles of equivalent items, and change the markup when the sequence carries meaning.
Why do my flex lines have uneven heights when wrapping?
Because align-content, not align-items, controls how wrapped lines are sized and spaced, and its initial value stretch divides the container's cross size evenly between the lines. If the container has no explicit cross size there is nothing to divide and the lines collapse onto their contents. Set align-content to flex-start to keep each line at its natural height, and remember the property does nothing at all under nowrap, where there is only one line — which is why this page greys it out there.
About flex-grow, flex-shrink and flex-basis
Flexbox is a one-dimensional layout model, and almost every confusion about it comes from the same place: people read the three flex properties as sizes when they are instructions about a remainder. The browser first works out each item's hypothetical main size from its basis, adds up those sizes and the gaps, and subtracts the total from the container. What is left is the free space. If it is positive, grow factors divide it; if it is negative, the shortfall is taken back in proportion to shrink multiplied by basis, so a 600px item gives up six times as much as a 100px item at the same shrink factor. That weighting is deliberate — unweighted shrinking would collapse small items to nothing while wide ones barely moved — and it is why the resolved sizes on this page rarely match the ratio anyone expected.
The second trap is the automatic minimum size. A flex item's min-width computes to auto rather than zero, and auto resolves to the item's min-content contribution — the longest unbreakable word in a paragraph, the widest cell in a nested row, the intrinsic width of an image. The shrink pass will not push an item past that floor, so instead of a narrower item you get a container that overflows, and the CSS you wrote looks like it did nothing. Setting min-width: 0 on the item is the fix, min-height: 0 in a column, and the switch above turns the floor off so you can watch the numbers and the boxes converge. Most generators skip this entirely, hand you a rule that works at their preview width, and leave you to rediscover the floor in production.
Reach for a grid template the moment the arrangement has to line up in two directions at once: flex lines know nothing about each other, so items on the second row of a wrapped flex container will not align with those above them. Flex is the right tool for toolbars, form rows, card footers and anything where one axis does the work. When the row has to behave differently at different widths, the breakpoint itself belongs in a media query, and a basis expressed in rem rather than pixels survives a reader who changed their font size — the px to rem converter does that arithmetic. One last thing worth knowing: flex-grow is animatable but forces layout on every frame, so a panel that should expand smoothly is far cheaper driven from a transform or a keyframe track than from the flex properties themselves.
Where the layout is computed
Every number on this page is worked out by JavaScript running in the tab you are reading it in. Nothing you type, paste or open is uploaded, logged or kept, which is also why the tools carry on working after you disconnect from the network.
This page keeps nothing at all between visits: the container settings and the item list live in React state and are gone the moment you close the tab, so there is no saved layout to leak and nothing to clear.