CSS Flexbox Generator

Choose direction, wrapping, justification and alignment, see five boxes react instantly, and copy the CSS.

flex-direction

justify-content

align-items

flex-wrap

align-content

gap (px)

Preview

CSS

How it works

Every common value for flex-direction, flex-wrap, justify-content, align-items and align-content is available.
The preview container has a fixed height and five numbered items so the alignment differences are obvious.
Only the properties you actually set are written out, so the CSS stays minimal.