CSS Flexbox Generator

Build flexbox layouts visually: direction, justify, align, wrap and gap with a live preview.

What is CSS flexbox?

Flexbox is a CSS layout mode for arranging items in a row or column. It controls how items are spaced, aligned and wrapped, making navigation bars, card rows and centring easy.

The main properties

Property	Controls
flex-direction	Row or column (and reverse)
justify-content	Spacing along the main axis: start, centre, end, space-between…
align-items	Alignment on the cross axis: stretch, centre, start, end, baseline
flex-wrap	Whether items wrap onto new lines
gap	Space between items

Centre anything

.container { display: flex; justify-content: center; align-items: center; }

Change the settings and watch the coloured items move in the preview. For two-dimensional layouts with rows and columns, use the CSS Grid Generator.

Frequently asked questions

Flexbox or grid?

Flexbox is best for one direction (a row or a column); grid is best for rows and columns together.

Why does justify-content not work?

There must be free space on the main axis; with flex-direction: column it works vertically.

Is gap supported for flexbox?

Yes, in all modern browsers.