CSS Flexbox Generator

Flexbox arranges items in one direction — a row or a column — and distributes the free space between them. Most layout questions come down to five container properties: flex-direction, flex-wrap, justify-content (main axis), align-items (cross axis) and gap, plus the flex shorthand on items. This generator writes those rules and the matching HTML and lets your own browser lay out the preview, so you see exactly what each value does.

How to use this tool

1. Choose the direction and whether items may wrap onto new lines.
2. Set justify-content for the main axis and align-items for the cross axis.
3. Set the gap and the number of items; optionally give items their own flex values.
4. Copy the CSS and HTML.

Formula

display: flex; flex-direction; flex-wrap; justify-content; align-items; [align-content]; gap · item: flex: <grow> <shrink> <basis>

justify-content works along the direction of the row or column; align-items across it. align-content only matters when items wrap onto several lines. flex: 1 is short for 1 1 0%, so items with flex: 1 share the space equally.

Example

Three items with flex-wrap: wrap, justify-content: space-between and align-items: center, where item 1 has flex: 2 1 0% and item 3 flex: 1, give item 1 two shares and item 3 one share of the free space; item 2 keeps its natural width. The default settings give a plain row with gap: 12px.