CSS Flexbox Playground Formatter🔒 100% local

Experiment with flexbox properties. Privacy-first, no server uploads, no tracking.

Input

CSS Flexbox Playground Formatter: related tools

Border Radius Preview Box Shadow Generator Code Heatmap

Takes the container settings as free-order space-separated tokens plus an optional item: section, and prints the .container and .item rules with the flex shorthand, the mental model, and notes that apply to that exact combination. Because center, flex-start and flex-end are legal on both axes, the first one you write fills justify-content and the second fills align-items, so 'center center' behaves the way people mean it. Press Process with an empty box and it prints the format sheet instead of an error.

CSS Flexbox Playground: how to use it

Type the tokens in any order, for example row wrap center center 16px.
Add item settings after the word item: - for example item: grow 1 basis 240px - to get the .item rule and its one-line shorthand.
Read the Gotchas section when it appears; the notes are chosen from your direction, wrap, align and item values.
Copy Output takes the rules, the reading guide and the notes.

CSS Flexbox Playground: worked example

row wrap center center 16pxbecomes

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;   /* main axis (horizontal) */
  align-items: center;        /* cross axis (vertical) */
  gap: 16px;
}

A bare number for the gap becomes px; px, rem, em, % and ch are also accepted.

row nowrap center center 12px item: grow 1 basis 240pxbecomes

.item {
  flex-grow: 1;
  flex-basis: 240px;
}

/* The same item in one line: */
.item { flex: 1 1 240px; }

The shorthand line is added whenever grow, shrink or basis was given; the container block above it is unchanged.

row, center, centerbecomesUnrecognised container value: "row,". Valid: direction, wrap, justify-content, align-items, gap.

Commas are not separators here. This is the format of the generator next door, and pasting it into the playground fails on the first token.

CSS Flexbox Playground: when to use it

Nailing down a wrapping toolbar or card row where the last line's alignment matters.
Getting both the longhand item rules and the flex shorthand for a card that should share space equally.
Learning why justify-content and align-items disagree about the main axis by trying the values on a real container rule.

CSS Flexbox Playground: what it does not do

Input is space-separated, not comma-separated. The comma format used by css-flexbox-generator throws 'Unrecognised container value: "row,"' as shown above.
Item values are not validated. 'item: grow banana' is accepted and emits flex-grow: banana along with the shorthand flex: banana 1 auto.
Only two centre-like tokens are meaningful on the two axes. A third repeated centre value simply overwrites align-items, and no warning is given.
The gotcha notes come from a fixed list of conditions (wrap with space-* justify, stretch on the cross axis, a column container with no gap, grow 0 with a basis, grow 1 with a 0px basis, a relative gap unit), so an unusual combination gets no note at all.

✨CSS Flexbox Playground Formatter🔒 100% local