Flexbox Playground

12 tools

Visually build a CSS flexbox layout.

Runs in your browser — your files and text stay on your device

Build a CSS flexbox layout visually and copy the code. Change direction, alignment, wrapping and gap and see how the items respond, which is easier than guessing between justify-content and align-items. It runs in your browser.

Flexbox Playground Grid Generator Box Shadow Text Shadow Border Radius Clip Path Glassmorphism Animation Easing Curve Filter Fluid Typography Unit Converter

directionjustify-contentalign-itemsflex-wrap

Gap (12px)Items (4)

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

How to use this tool

1Adjust direction, justify-content, align-items, wrap, and gap using the controls.
2Watch the numbered boxes rearrange live in the preview.
3Copy the generated flexbox CSS for your container element.

Frequently asked questions

What's the difference between justify-content and align-items?

justify-content controls spacing along the main axis (horizontal for row, vertical for column); align-items controls alignment along the cross axis (perpendicular to the main axis).

Is this generated on a server?

No — the preview and CSS are computed entirely in your browser.

Guides

All guides →