justify-content, justify-items, align-content, align-items

The two axes

Flexbox has a main axis and a cross axis. In a row (flex-direction: row), the main axis is horizontal and the cross axis is vertical. In a column, they flip.

*-items vs *-content

*-items aligns each item within its cell or line. justify-items = main axis (left/right); align-items = cross axis (top/bottom). It affects the items themselves.

*-content distributes extra space—either between items along the main axis, or between lines along the cross axis. It affects how leftover space is used, not the items’ size.

justify-content

A *-content property. Distributes extra space along the main axis (horizontal in a row). Use it when the container is wider than the items and you want to space them out: flex-start, center, space-between, etc.

justify-items

An *-items property. Aligns each item along the main axis within its cell. In Grid, this positions items left/center/right inside their grid cell. Note: Flexbox doesn’t have justify-items—it’s a Grid property.

align-items

An *-items property. Aligns each item along the cross axis within its line. In a row, that’s vertical (top, center, bottom). Use it when items have different heights and you want them aligned: stretch, center, flex-start, flex-end.

align-content

A *-content property. Distributes extra space between lines along the cross axis. Only applies when you have multiple lines (flex-wrap: wrap). If everything fits on one line, align-content does nothing.