CSS Flexbox Generator

Build a CSS flexbox layout visually and copy the generated CSS. Set the container's flex-direction, flex-wrap, justify-content, align-items, align-content, gap, and padding; control each item's flex-grow, flex-shrink, flex-basis, align-self, and order. Live preview with draggable items. Pairs with the CSS Grid Generator. Everything runs locally in your browser.

Container

Direction

Wrap

Justify

Align items

Align content

Gap8px

Padding16px

The generated CSS includes container styles and per-item flex shorthand. Flex is flex: grow shrink basis. Pairs with the CSS Grid Generator. Runs locally.