CSS Flexbox Generator & Playground

Change one layout setting at a time to see how the items move. Copy the container rules for use in your stylesheet.

Runs locally in your browser

View category: Frontend & Design (34)

· display: flex · alignment · gap

CONTROL RACK

justify-content

align-items

align-content

LIVE STAGE

EXPORT CSS

How to lay out a flex container and copy the CSS

The workbench writes one rule for the container: display: flex plus flex-direction, flex-wrap, justify-content, align-items, align-content and gap. The live stage shows numbered boxes so you can see how the controls interact before the rule reaches your stylesheet.

There is no run button — the preview and the Generated code pane follow every change. Copy CSS puts exactly that text on the clipboard, and Reset returns the page to the state it loads with: row, wrap, flex-start, stretch, stretch, 16 px, 6 items.

Choose the direction — row or column, each with a reversed variant — and decide whether items may wrap onto more than one line: nowrap, wrap or wrap-reverse.

Distribute the free space along the main axis with justify-content: flex-start, center, flex-end, space-between, space-around or space-evenly.

Align the items inside their line with align-items, and — once the container wraps onto several lines — spread those lines with align-content.

Set the gap between 0 and 96 pixels. Item count (1 to 12) changes how many numbered boxes the preview renders; out-of-range or decimal input snaps to the value the export uses, so 999 becomes 96 and 3.7 becomes 4.

Press Copy CSS — the status line confirms the copy — then paste the rule into your stylesheet. Reset restores the load state at any time.

What each control changes and what the exported rule contains

What the six controls do

flex-direction sets the main axis and the order of the boxes; flex-wrap lets the items move onto new lines; justify-content distributes the free space on the main axis, so its effect is easiest to see while the line is not completely full.

align-items positions the items inside their line, while align-content spreads the lines themselves. align-content only moves anything when the container really wraps onto more than one line: with nowrap, or a single line, changing it will not move the boxes even though the declaration still appears in the CSS.

Reading the live stage

The stage renders as many numbered boxes as Item count asks for and applies the same values that go into the CSS. The hint next to the stage title names the main and cross axes and flips its arrows when you switch to a column direction.

Item count is a preview control only — it is not part of the exported rule. While align-items is stretch the boxes fill the container height; pick another alignment or a fixed gap if you want to compare the lines.

The exported rule and local processing

Generated code holds exactly one block: .flex-container with display: flex and the six declarations, in the order shown. There are no per-item rules, vendor prefixes or media queries, so only the class name and the values need adapting.

The tool runs in the browser: values and selections never leave the page. Copy CSS writes the same text to the clipboard and the status line reports it, which also makes the rule safe to prepare for a client project before it is committed to a stylesheet.