Flexbox Playground
Every flex property against a live row — including the two that look like grow settings and are not
Click a box to edit it. The dashed rail is the flex container — 100% of the space available.
.row {
display: flex;
gap: 12px;
}<div class="row">
<div class="item-1">Item 1</div>
<div class="item-2">Item 2</div>
<div class="item-3">Item 3</div>
</div>flex gap-[12px]Now use it on something
Every effect, block, page and template in the catalog is styled against tokens shaped exactly like these — so they take your values rather than fighting them.
npx shadcn@latest add https://hoverlab.dev/r/hoverlab.json
Needs flex-wrap: wrap — with one line there is nothing to distribute.
Space between items. Flex gaps do not collapse and do not appear on the outside edge, so this is not the same as a margin on every child.
One value emits the short gap: 12px. Off, you get gap: row column.
Share of the leftover space this item claims. Zero means it never gets any. Two items at 1 and 2 split the surplus one-third / two-thirds — the ratio is between siblings, not a multiplier on the item.
How readily it gives space back when the row overflows. One is the default, which is why items you never touched still get squeezed. Zero pins the width and pushes the overflow onto everyone else.
The size it starts from, before grow and shrink argue about the rest. This is the property behind the most common flexbox surprise: flex: 1 means 1 1 0% and makes items equal, while flex-grow: 1 alone leaves the basis at auto and only shares out the surplus, so wordier items stay wider. Set 0% here to see them equalise.
Moves the item without moving the markup. Negative pulls it earlier. Worth knowing that this reorders paint only — tab order and screen readers still follow the DOM, so a visual order that contradicts the source is a real accessibility bug.
Preview only. How many words this box carries — the only thing that makes a basis of auto look different from a basis of zero.
Preview only. Narrow it until the row overflows — that is where flex-shrink, flex-wrap and the min-width trap below all start to matter.
The cure for the overflow nobody can explain: min-width computes to auto on a flex item, not zero, so an item will not shrink below its longest unbreakable word no matter what flex-shrink says. Narrow the container above with this off, then turn it on.
Keep this row. This browser remembers what you last had open. A free account remembers the ones you name, on every machine you use.
- Grid GeneratorPaint a page layout onto a grid and copy the CSS, with grid-template-areas checked for the rectangle rule as you go — the rule that silently voids the whole declaration when you break it. Explicit tracks or a responsive auto-fit wall.
- Spacing ScaleGenerate a whole spacing ladder from two decisions: a base unit and a progression — linear multiples or one of the same five modular ratios the typography tool uses. Every step is drawn at its actual size, so you see whether neighbours are distinguishable before you commit. Export as CSS variables, Tailwind spacing config, or JSON.
- SVG ToolkitThe four SVG jobs that are always four different websites — optimise, convert to JSX or a data URI, generate a pattern, generate a wave — with one source shared between them, so the file you clean is the file you convert.