Flexbox generator

Set direction, wrap, justify-content, align-*, gap, and item count; watch a live preview and copy the container CSS.

Everything runs in this browser.

Preview

1
2
3
4
5

CSS

display: flex;
flex-wrap: wrap;
gap: 8px;

How to use

  1. Pick the container properties.
  2. Watch the preview boxes reflow.
  3. Copy the generated CSS.

What it supports

Container-level flexbox only — no per-item flex/order controls. 1–12 items, gap 0–200 px. The preview uses the same CSS it emits.

Related tools

Related guides