What does align-content do in Flexbox?

align-content spaces out the wrapped lines of a multi-row flex container along the cross axis — it does nothing unless items actually wrap.

When flex-wrap: wrap causes items to spill onto several lines, those lines themselves can be packed in different ways across the cross axis (vertically, for a row layout). That's what align-content controls — think of it as justify-content but for whole rows instead of individual items.

#parent {
  display: flex;
  flex-flow: row wrap;
  /* Group all the rows in the vertical centre */
  align-content: center;
}

Gotcha: with a single-line flex container (nowrap, or just one row's worth of items) align-content has no effect at all — there's only one line, so there's nothing to distribute.