Flexbox generator

Explore alignment, direction and wrapping.

Live preview

Preview styling and sample content are not included in your CSS.

CSS output

Example HTML

How to use Flexbox

Tune the flex container, then control the common item basis and growth. Copy both CSS and example HTML to reproduce the preview.

The generated selector is an example. Rename it to match your markup. Shapes, shadows, gradients and rounded corners need an element with dimensions or content.