Your files stay on your device

Flexbox Playground

Edit every flex container and item property with a live layout, copyable CSS, and a table comparing the CSS spec computed widths with your browser's own.

The spec column re-runs the CSS flex sizing algorithm on this page: flex base sizes (numeric basis, or the content size when basis is auto), free space split by grow, and negative space removed in proportion to shrink times basis. It is deliberately simpler than the browser in three ways: it does not know min-content sizes, so min-width:auto never rescues an item here; it floors shrunken items at zero without the spec's freezing loop; and column direction gets no spec numbers, because there is no container height to size against. The measured column is your browser via getBoundingClientRect, so sub-pixel rounding shows up as small deltas. When the two columns disagree for reasons beyond those, trust the browser and treat the spec column as the arithmetic.
Options

More regex & cron tools

- Regex tester (/dev/regex-tester)
- Cron explainer (/dev/cron)
- Color converter & contrast (/color/converter)
All regex & cron tools (/dev)

Was this tool useful?
YesNo

Canonical HTML: https://nutter.tools/dev/flexbox-playground
Markdown version: https://nutter.tools/dev/flexbox-playground.md
Plain-text version: https://nutter.tools/dev/flexbox-playground.txt
Agent index: https://nutter.tools/llms.txt