Set up a CSS flexbox layout

Row or column, wrap or not, space-between or center — set the container properties, watch the preview, copy the CSS.

Tools used in this guide

The job

Flexbox is the everyday answer to "put these in a row, spaced out, vertically centered" — six properties on the container do it, and seeing them live beats re-reading the spec.

Set

Choose direction, wrap, justify-content, align-items, align-content, gap, and how many demo items to show. The preview reflows instantly and the emitted CSS matches what you see.

justify-content spaces along the main axis; align-items centers across it — the two most-confused pair.
align-content only matters when items wrap to multiple lines.

Worked example

A navbar — logo left, links right: flex-direction row, justify-content space-between, align-items center, gap 16. The emitted CSS is exactly that.

Where it stops

Container properties only — no per-item flex grow/shrink/order. Up to 30 demo items and 96 px of gap. The generated block is the container's CSS; children keep their own styles.