Flexbox Playground

Live flexbox preview with copy-ready CSS.

flex-direction

flex-wrap

justify-content

align-items

gap (px)

Live preview

CSS

display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
gap: 8px;

Visual flexbox playground. Move the controls and the preview boxes update live. Once it looks right, copy the CSS. The most-asked layout question (centering both axes) is justify-content: center + align-items: center.

About

Tweak flex-direction, justify-content, align-items, flex-wrap, and gap. The preview updates live with 5 boxes. Copy the CSS when it looks right.

How to use

Move the controls.
Copy the CSS.

FAQ

How do I center both axes?+

justify-content: center + align-items: center. The most-asked Stack Overflow flexbox question of all time.