📐 Flexbox Generator

Visually configure CSS Flexbox properties — direction, justify, alignment, wrap and gap. Generate production-ready CSS with live preview — all in your browser.

Number of items

Flex direction

Justify content

Align items

Flex wrap

Align content

Gap (px)

About the Flexbox Generator

This tool helps you build CSS Flexbox layouts visually. Adjust flex-direction, justify-content, align-items, flex-wrap, align-content and gap. The preview updates instantly and the generated CSS code is ready to paste into your stylesheet.

How to use

Set the number of flex items.
Choose flex-direction (row, column, or their reverses).
Pick justify-content and align-items to control main-axis and cross-axis alignment.
Optionally change flex-wrap, align-content and gap.
Click Update Preview, then Copy CSS to use in your project.

Frequently asked questions

What's the difference between justify-content and align-items? justify-content aligns items along the main axis (defined by flex-direction); align-items aligns them along the cross axis.

When does align-content apply? align-content only has an effect when flex-wrap is set to wrap or wrap-reverse and there are multiple lines of items.

Can I set per-item flex grow? This tool uses uniform items. For per-item control, add flex-grow, flex-shrink and flex-basis to each child manually.