ZumaTools

Flexbox playground & generator

Experiment with every flexbox property on live boxes, click an item to fine-tune it, and copy the CSS that reproduces the layout.

Click an item to edit its own flex properties.

3
flex-directionwhich way the main axis points

Main axis runs left to right — items line up horizontally.

justify-contentspacing along the main axis

Items pack toward the start of the main axis.

align-itemsposition on the cross axis

Items without a fixed cross size stretch to fill the container’s cross axis.

flex-wrapwhat happens when items run out of room

Everything stays on one line — items shrink instead of wrapping.

align-contentinactive — needs flex-wrap: wrap and more than one line

Wrapped lines stretch to share the leftover cross-axis space.

gapspace between items

gap adds space between items only — never at the container edges.

Generated CSS
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 8px;
}

Runs entirely in your browser — nothing is uploaded or stored.

How it works

  1. Add up to eight items, then switch flex-direction, justify-content, align-items, flex-wrap and gap with the segmented buttons — the preview reflows instantly and every value shows a one-line explanation of what it does.
  2. Click any numbered box to open its item panel and set flex-grow, flex-shrink, flex-basis and align-self for that one item — useful for seeing how a single growing item absorbs leftover space.
  3. Copy the generated CSS — the container rule plus per-item overrides written as nth-child selectors — and paste it into your stylesheet.

Frequently asked questions

What is the difference between justify-content and align-items?
justify-content distributes items along the main axis — the direction items flow in — while align-items positions them on the cross axis, perpendicular to it. The catch is that flex-direction decides which axis is which: with row the main axis is horizontal, with column it is vertical, so the two properties effectively swap roles. Flipping the direction buttons in the playground makes this swap obvious in seconds.
Why does align-content seem to do nothing?
align-content only distributes whole wrapped lines, so it has no visible effect until two conditions are met: flex-wrap is set to wrap and the items actually break onto more than one line. With a single line of items, align-items is the property doing the work. The playground labels align-content as inactive while wrap is off so you always know which property is in charge.
What do flex-grow, flex-shrink and flex-basis actually mean?
flex-basis is the item’s starting size on the main axis before any free space is dealt with; auto means use the content size. flex-grow then hands out leftover space in proportional shares — an item with grow 2 receives twice as much extra as one with grow 1 — while flex-shrink works the same way in reverse when space runs short. The shorthand flex: 1 simply means grow 1, shrink 1, basis 0.
When should I use flexbox instead of CSS grid?
Flexbox is one-dimensional: it excels at laying out a row or a column where item sizes drive the layout — toolbars, navigation bars, tag lists, centering. Grid is two-dimensional and works best when the layout defines the tracks and content fills them, as in page shells and card matrices. They combine well: a grid for the page, flexbox inside each cell.
Is anything I build here uploaded, and will the CSS work everywhere?
Nothing leaves your device — the preview is your own browser’s layout engine rendering the exact properties you selected, and the CSS string is assembled locally. All the properties used, including gap on flex containers, are supported unprefixed in every current browser; gap in flexbox has been safe since roughly 2021.

About this tool

Flexbox is the layout tool front-end developers reach for most, yet its property names are famously unintuitive: justify and align sound interchangeable, the main axis silently rotates when flex-direction changes, and three separate item properties negotiate over free space. This playground turns those abstractions into something you can poke. A live container holds one to eight numbered boxes, and every container property — flex-direction, justify-content, align-items, align-content, flex-wrap and gap — is a row of segmented buttons. Selecting a value reflows the boxes instantly and shows a plain-English line explaining what that value really does.

Item-level control is where most flexbox tutorials stop and this tool keeps going. Click any box and a panel opens for that specific item, exposing flex-grow, flex-shrink, flex-basis and align-self. Give item 2 a grow of 1 and watch it swallow the leftover space; set shrink to 0 and a wide basis to see the container forced to overflow; use align-self to pull one box out of line with its siblings. The boxes intentionally have slightly different natural heights so stretch, center and baseline alignment produce visibly different results.

The generated stylesheet updates with every click: a .container rule with your chosen properties, plus a nth-child override for each item you customised — only non-default declarations are emitted, so the output stays as clean as hand-written CSS. One button copies the whole thing. Everything runs client-side in your browser; no code or interaction data is sent anywhere.

A practical way to use it: recreate the layout that is fighting you. Set the same direction and wrap as your real component, add a matching number of items, and toggle values until the boxes land where you want them — then compare the generated CSS against yours. Nine times out of ten the culprit is a default you forgot, usually align-items: stretch or flex-shrink: 1.

Related tools