Understand flexbox by changing it and watching

Toggle align, justify, wrap, direction, and gap on a live container and copy the CSS.

flex-direction

flex-wrap

justify-content

align-items

gap8px

items5

CSS

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

About this tool

Toggle each flex property — direction, wrap, align-items, justify-content — on the live container.
The CSS output updates instantly.
Copy the flexbox CSS.

Everything runs in your browser. No account, no ads, no tracking, and no upload.

flexboxcss layoutflex designers