Flexbox Playground / Generator

How to use it

1. Set the container first — display, direction, wrap, both alignment properties and the gaps are labeled control groups.
2. Select an item in the preview, by click or arrow keys, to give it order, grow, shrink, basis or align-self overrides.
3. Load a preset chip as a starting point; your next edit makes the state yours.
4. Copy each block on its own, copy all CSS at once, download flexbox.css, or share the state as a link.

Flip flexbox container and item properties from labeled controls and a real DOM preview restyles instantly — the layout is the browser's own, not a canvas drawing of it. Container CSS, per-item CSS and a minimal HTML snippet stay in sync with every change, ready to copy block by block or all at once, and six presets cover the classic layouts, centering a div included.

How it works

Flexbox runs on two axes. The main axis follows flex-direction — row runs along the line of text, column stacks — and justify-content distributes items along it. The perpendicular cross axis belongs to align-items, and to align-content once wrapping produces multiple lines. The axes are logical: direction: rtl or a column direction moves where start points without renaming a single property.

The famous overflow gotcha is specified behavior: css-flexbox-1 gives every flex item an automatic minimum size, so min-width defaults to auto and shrinking stops at the item's min-content width, whatever flex-shrink says. An unbreakable word sets that floor at its own full width. min-width: 0 on the item removes the floor and lets it shrink normally.

Examples

Preset: center a div

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

Column, stretch, 5 items

.container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

RTL with flex-start

.container {
  display: flex;
  gap: 12px;
  direction: rtl;
}

Preset: min-width auto

<div class="container">
  <div class="item">1</div>
  <div class="item">pneumonoultramicroscopicsilicovolcanoconiosis</div>
  <div class="item">3</div>
</div>

Every example on this page is executed against the same engine that powers the tool, on every build.

Common errors

`banana` is not a valid flex-basis — use a length (px, em, rem, %, vw, vh, ch, ex, vmin, vmax), `auto`, `content` or `0`.

The one free-text field accepts the flex-basis grammar and nothing else; the diagnostic repeats your token, lists every accepted form, and the last good output holds while you fix it.

`200` needs a unit — try `200px` or `25%` — only `0` can omit its unit.

A bare number is the commonest near-miss, so the suggestion reuses your own value with units attached. Zero is the single exception the grammar allows.

flex-basis is longer than the 64-character limit for this tool — shorten the value.

Values past 64 characters are refused whole, never trimmed — silent truncation could turn one valid length into a different one. Any single flexbox length fits comfortably.

Keyboard shortcuts

⌘/Ctrl + C

Copy all CSS while nothing is selected.

⌘/Ctrl + Shift + C

Copy all CSS even over an active selection.

⌘/Ctrl + S

Download the current CSS as flexbox.css.

? or ⌘/Ctrl + /

Open the keyboard-help dialog.

t

Cycle the color theme.

Esc

Close the topmost dialog.