CSS Layout Tool

CSS Flexbox Playground

Visually experiment with every Flexbox property. Adjust container and item settings, see live results, and copy production-ready CSS and HTML.

Presets

flex-direction

flex-wrap

justify-content

align-items

align-content

gap: 10px

3 - 12 items

Click an item in the preview to select it for individual settings.

order

flex-grow

flex-shrink

flex-basis

align-self