🧩 CSS Flexbox Generator

Pick flex direction, justify-content, align-items and gap to build a display: flex CSS snippet, with a live preview.

flex-direction

justify-content

align-items

Gap (px)

Which axis each property controls

The four controls write a container rule, and the whole thing hinges on flex-direction deciding which way the main axis runs:

display: flex;
flex-direction: row;          /* main axis = horizontal */
justify-content: flex-start;  /* position along the MAIN axis  */
align-items: stretch;         /* position across the CROSS axis */
gap: 10px;

Switch flex-direction to column and the two swap jobs without you touching them: justify-content now stacks items vertically and align-items pushes them left or right. That is the single thing people get wrong most often. The -reverse values flip the order items are painted in, but not the order a screen reader or the tab key follows.

The three distribution values

With n items and f pixels of leftover space, they divide it differently:

space-between - f / (n - 1) between each pair, nothing at the two ends. Four items give three equal gaps.
space-around - each item gets f / n split evenly on both its sides, so the outer edges end up half the size of the gaps between items.
space-evenly - f / (n + 1) everywhere, edges included. Four items give five identical gaps.

The generator does not emit flex-wrap, so the default nowrap applies: items squeeze onto one line and can shrink below their content width rather than dropping to a second row. Add flex-wrap: wrap yourself for anything responsive.

Frequently asked questions

How do I centre a div horizontally and vertically?

On the parent, set display: flex with justify-content: center and align-items: center. In row direction the first centres left-to-right and the second top-to-bottom - but the parent needs a height for the vertical part to have anywhere to centre within.

What is the difference between space-around and space-evenly?

space-around gives the outer edges half the space of the inner gaps, because each item carries its own margin on both sides. space-evenly makes every gap, including the two at the ends, exactly the same.

Why is align-items: center not doing anything?

The cross axis has no spare room. In a row, that means the container's height is only as tall as the tallest item, so there is nothing to centre within. Give the container a height or a min-height.