CSS Flexbox Playground Formatter🔒 100% local
Experiment with flexbox properties. Privacy-first, no server uploads, no tracking.
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.
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.
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.
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.
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.