CSS Flexbox Generator

The generator keeps your layout as a small structured configuration — the six container properties, a list of items, and the per-item flex values. Every time you change a control, that configuration is re-serialised to CSS by a pure module and fed into both the preview and the copy box, so what you see is exactly what you paste. Only the legal values from the W3C CSS Flexible Box Layout Module Level 1 are offered, so you cannot produce an invalid rule.

The main axis and the cross axis. Flexbox lays items along a main axis and aligns them on the perpendicular cross axis. With flex-direction: row the main axis is horizontal, so justify-content moves items left-to-right and align-items moves them top-to-bottom. Switch to column and the axes swap — the single biggest source of flexbox confusion. The axis badge above the preview always shows the current orientation (W3C Flexbox §4–5).

Minimal, correct output. The serialiser emits display: flex; always, then adds a declaration for a property only when its value differs from the CSS initial value — flex-direction: row, flex-wrap: nowrap, justify-content: flex-start, align-items: stretch, align-content: stretch, and gap: 0. That keeps the snippet short and copy-paste-correct — nothing you did not choose ends up in your stylesheet.

align-content only when it matters. Per the spec, align-content has no effect on a single-line flex container. The tool therefore emits it only when flex-wrap allows multiple lines, and shows an inline notice when you pick a value that would currently be a no-op — the behaviour MDN documents as the classic “why is align-content not working” gotcha.

Per-item flex. Each item can override flex-grow, flex-shrink, flex-basis, align-self, and order. Grow, shrink, and basis are combined into the flex shorthand and emitted together when any of the three leaves its initial 0 1 auto. Item rules are numbered by source order as .item-1, .item-2, and so on, and an item left fully default produces no rule at all.

• W3C — CSS Flexible Box Layout Module Level 1 (canonical property definitions & axis semantics)
• MDN — Basic concepts of flexbox (axis behaviour & the single-line align-content gotcha)
• MDN — the flex shorthand (grow / shrink / basis)

Property values and axis rules were last cross-checked against the W3C specification and MDN on 2026-07-17. The page is re-verified when the CSS Flexbox module advances or MDN updates its guidance.