Flexbox Editor

Visually compose a flex container and copy the matching CSS. Toggle direction (row, column, row-reverse, column-reverse), justify-content (six options including space-evenly), align-items (including stretch and baseline), flex-wrap, gap, and the number of preview items — the live preview and code panel update instantly.

1. Click buttons in the Properties card to choose flex-direction, justify-content, align-items, and flex-wrap. 2. Drag the Gap slider (0–32px) to set spacing between items. 3. Drag the Items slider (1–12) to add or remove preview boxes. 4. Watch the live preview at the top, then click Copy to copy the full flex declaration block.

direction: row | column | row-reverse | column-reverse. justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly. align-items: flex-start | flex-end | center | stretch | baseline. flex-wrap: nowrap | wrap | wrap-reverse. gap is in px. The output always emits display: flex plus all five properties regardless of whether values are defaults.