CSS Flexbox Generator

Build flex layouts visually and copy the CSS.

flex-direction

flex-wrap

justify-content

align-items

Gap · 12pxItems · 4

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

Free CSS Flexbox generator. Set flex-direction, justify-content, align-items, flex-wrap and gap with visual controls, preview the flex items live, and copy the CSS. Runs in your browser.

How to use the CSS Flexbox Generator

01Choose a flex-direction and whether items wrap.
02Pick justify-content and align-items to position the items.
03Adjust the gap, then copy the generated CSS.

Frequently asked questions

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

justify-content positions items along the main axis (the flex-direction), while align-items positions them along the cross axis. The live preview makes the effect of each obvious.