When Lines Become Many

Many confuse these properties. Let's separate them once and for all.

Align-items (For Elements)

Works inside each line separately. Aligns flex elements relative to their line.

• Works always, even if there's only one line.

Align-content (For Container)

Works with all lines at once as a single group. Aligns rows of elements inside the container.

• Works ONLY if flex-wrap: wrap is enabled and there's more than one line.

.container {
  display: flex;
  flex-wrap: wrap;
  height: 500px;
  align-content: space-between; /* Will distribute rows at top and bottom of container */
}