What the Flexbox Playground does
This flexbox playground lets you change every flex container property - direction, wrapping, justify-content, align-items, align-content and gap - and every item property - grow, shrink, basis, order and align-self - and watch your browser lay the items out immediately, with a plain-English explanation of each value and the CSS to copy.
It also shows why items end up the size they do. For a single row of items with numeric bases, it runs the flex sizing algorithm from the CSS Flexbox specification and puts its answer next to the width the browser actually measured, so the arithmetic behind flex-grow and flex-shrink stops being a mystery.
How to use it
- Pick an example: a navigation bar, three items growing 1:2:1, two items shrinking by basis, or wrapping tags.
- Change the container properties on the left. The layout, the explanation and the CSS update as you go.
- Edit each item's grow, shrink and basis. Leave basis empty for auto, which means the item's own content size.
- Use order and align-self to move or re-align single items, and note the warning when the visual order no longer matches the HTML.
- Compare the browser's measured sizes with the flex algorithm's figures, then copy the CSS.
Reading the results
When items are smaller than the container, the leftover space is shared by flex-grow: each item gets its basis plus free space x its grow / total grow.
When items overflow, flex-shrink removes the excess in proportion to shrink x basis, not shrink alone. A 300px item with shrink 1 gives up three times as much as a 100px item with shrink 1.
If the browser's number differs from the algorithm's, the usual reason is content: an item will not shrink below its automatic minimum (the longest word, or an image) unless you set min-width: 0. The algorithm here assumes a minimum of zero and says so.
Worked example: growing 1:2:1 and shrinking by basis
Three items with a 100px basis sit in a 600px row with no gap. Free space is 600 - 300 = 300px. The grow factors add up to 4, so the items get 300 x 1/4 = 75px, 300 x 2/4 = 150px and 75px extra: final widths 175px, 250px and 175px.
Now two items with bases 100px and 300px and shrink 1 each sit in a 300px row. They overflow by 100px. Weighted by shrink x basis, the weights are 100 and 300 out of 400, so they lose 25px and 75px and end up at 75px and 225px - the larger item shrinks more, even though both have the same shrink factor.
Limitations: what the result does not prove
- The algorithm comparison covers a single row with numeric bases and a zero minimum size. Wrapping lines, column direction and auto bases are shown by the browser only.
- Item labels are short words, so content minimums rarely interfere here; long text or images in your own layout may stop items shrinking.
- order and the reverse directions change only the visual order. Keyboard focus and screen readers still follow the HTML source order.
- The playground has up to eight items; the rules are the same for more.
Privacy: where your data goes
Everything you paste, type or drop is processed in this browser tab. It is not uploaded, logged, stored or sent to analytics. Session recording and tag-manager scripts are switched off on this page.
Standards and sources
- CSS Flexible Box Layout Module Level 1 - checked 19 Sep 2026
- W3C - Resolving flexible lengths (section 9.7)
- MDN - Basic concepts of flexbox
Frequently asked questions
What is the difference between justify-content and align-items?
justify-content distributes items and spare space along the main axis, which is horizontal for flex-direction: row. align-items positions items across the other axis, vertically in a row. Switching to column swaps which direction each one controls.
Why does flex: 1 not make my items equal widths?
flex: 1 means grow 1, shrink 1 and a basis of 0%, so items share all the space equally - until an item's content is wider than its share. Its automatic minimum size then wins. Add min-width: 0 to the items to let them become truly equal.
How does flex-shrink decide which item shrinks most?
The overflow is removed in proportion to each item's shrink factor multiplied by its flex basis. Larger items therefore shrink more than smaller ones with the same shrink value, which keeps small items like icons from being squashed first.
When does align-content do anything?
Only when the container wraps onto more than one line. It distributes the lines themselves within the container's cross size, much as justify-content distributes items. In a single-line flex container it has no visible effect.
Is it bad to use order or row-reverse?
Not always, but it creates a mismatch between what people see and the order the keyboard and screen readers follow. If the reading sequence matters, change the HTML order instead, which WCAG success criteria 1.3.2 and 2.4.3 favour.
What does flex-basis: auto mean?
It tells the browser to use the item's width (or height in a column) if one is set, and otherwise its content size. Growing and shrinking then start from that size. A basis of 0 ignores the content and shares all the space by grow factors alone.
Last reviewed by the A2Z.Tools team against the sources listed above.
