CSS Flexbox Generator

About this tool

Build a CSS flexbox layout visually — adjust direction, wrapping, alignment, and gap with live sliders and dropdowns, watch a preview update instantly, then copy the exact CSS for your container.

Main axis vs. cross axis is the one concept that makes every flexbox property click into place. flex-direction sets which way the main axis runs — horizontal for row, vertical for column — and every other alignment property is defined relative to that axis, not to "left/right" or "up/down" directly. justify-content always controls spacing along the main axis; align-items and align-content always control alignment across the cross axis (perpendicular to it). Switch direction from row to column here and watch justify-content's effect visually rotate 90° — same property, same rule, different axis.

Why gap replaced margin hacks. Before gap was supported on flex containers, spacing items apart meant adding a margin to every child and then subtracting it back out at the container's edges (or using a :not(:last-child) selector) — fiddly and easy to get wrong on wrap. gap puts fixed spacing only between items, on both axes at once, with zero extra margin at the container's own edges, which is what this generator outputs.

What flexbox is (and isn't) good at. Flexbox excels at one-dimensional layout — a row or a column of items that need to share space, align, or wrap intelligently: a navbar, a card row, a button group, form fields laid out horizontally. For a genuinely two-dimensional layout (rows and columns that need to line up with each other, like a photo gallery or a full page grid), CSS Grid is usually the better tool — see the CSS Grid generator for the same visual-builder approach applied there.

For other visual CSS builders on this site, see the CSS gradient generator and cubic-bezier easing generator.

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).

What does align-content do if I only have one row of items?

Nothing visible — align-content only has an effect when flex-wrap creates multiple lines and there's extra space to distribute between them.

Do I need to set anything on the child items?

Not for basic layout — everything shown here is a container-level (display: flex) property. Individual items can additionally use flex-grow, flex-shrink, or align-self for per-item control, which this generator doesn't cover.

When should I use flexbox instead of CSS Grid?

Flexbox is built for one dimension at a time — a single row or column that needs to share, wrap, or align space. If you need rows and columns to line up together as a true grid, CSS Grid is usually the better fit.

Why doesn't flex-direction: column make my items fill the width?

In column mode, the cross axis is horizontal, so it's align-items (not justify-content) that controls width-filling behavior — set it to stretch (the default) to fill, or another value to size items to their content.

Is browser support a concern for flexbox today?

No — flexbox has been supported in every major browser, including on mobile, for many years. It's safe to use without fallbacks for virtually any audience today.

What CSS property does "gap" replace from older flexbox code?

Manually adding margin to every child and removing it at the container's edges. gap handles the spacing cleanly in one line, without extra margin math or edge-case selectors.