CSS flexbox generator

Adjust flex alignment options and copy the CSS.

flex-direction justify-content align-items flex-wrap gap(px) 8 Items 5

The hard part of Flexbox is rarely the syntax. It is remembering which of justify-content and align-items runs along which axis, and why that swaps the moment you change flex-direction. Change a dropdown here and the preview boxes move immediately, which is a faster way to build the intuition than reading the spec again.

How it works

The one rule that explains everything

Flexbox has a main axis and a cross axis, and flex-direction decides which is which.

row (the default): the main axis runs left to right, the cross axis runs top to bottom.
column: the main axis runs top to bottom, the cross axis runs left to right.

justify-content always positions items along the main axis. align-items always positions them across the cross axis. So the instant you switch to column, those two swap their visual meaning. Set direction to column in the tool and watch it happen - that single experiment tends to make the rule stick.

What each control does

Control	Effect
flex-direction	Which way items flow, and therefore which axis is the main one
justify-content	Spacing along the main axis (center, space-between, and so on)
align-items	Alignment on the cross axis; stretch by default
flex-wrap	Whether items drop onto a new line instead of shrinking
gap	Space between items, in pixels
Items	Preview only - how many boxes to draw, not part of the output

The preview boxes are deliberately different heights so align-items has something visible to do. With stretch, they all match the tallest one.

Two things that catch people out

nowrap is the default, so items squash rather than wrap. A row that looks cramped on a phone usually just needs flex-wrap: wrap. And align-items appears to do nothing when the container has no spare room on the cross axis - give the container a height, or let it wrap, and the alignment shows up.

Rename .container to your own selector when you paste. The children need no CSS to become flex items.

Terms explained

Main axis: The direction items flow in, set by flex-direction. justify-content works along this axis.
Cross axis: The axis perpendicular to the main one. align-items works along this axis.
justify-content: Distributes the items and any free space along the main axis.
align-items: Aligns items on the cross axis. The default, stretch, makes them fill the container's height in a row layout.
flex-wrap: Controls whether items move onto a new line when they run out of room. The default is nowrap.
gap: Space between flex items. Cleaner than margins, because it never adds space on the outer edges.

Frequently asked questions

Why does align-items seem to do nothing?

Cross-axis alignment needs free space to work with. In a row layout the container has to be taller than its items, so give it a height or add flex-wrap: wrap so the lines have room. The default value, stretch, also expands items to fill that height, which hides the effect until you choose something else.

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

space-between pushes the first and last item against the container edges and splits the remaining space between the others. space-around gives each item an equal margin on both sides, so the outer edges end up with half the space of the middle gaps. space-evenly makes every gap identical, including the two at the ends.

How do I center something both horizontally and vertically?

Set justify-content: center and align-items: center on the container, and make sure the container has a height. That pair centers the content on both axes, and it keeps working if you later switch flex-direction, because each property follows its own axis.

Should I use gap or margins between flex items?

gap is usually the better choice, because it applies space only between items and saves you from stripping a trailing margin off the last child with a :last-child rule. It has been supported for Flexbox across all major browsers for several years now.