CSS align-content: Space Wrapped Flex Lines

align-items aligns items within a line. align-content aligns the lines themselves inside the container. It only matters when two things are true:

The container has flex-wrap: wrap, and
It has more than one line, plus extra cross-axis space.

index.html

HTML

<style>
  .container { background: #f4f9fc; border: 2px dashed #1a5276; padding: 8px; }
  .box { background: #d94a00; color: #fff; padding: 12px 18px; font-weight: bold; }
  .container { display: flex; flex-wrap: wrap; height: 200px; gap: 6px; margin-bottom: 8px; width: 48%; display: inline-flex; vertical-align: top; }
  .box { width: 60px; height: 30px; padding: 4px; }
</style>
<div class="container" style="align-content:flex-start"><div class="box">1</div><div class="box">2</div><div class="box">3</div><div class="box">1</div><div class="box">2</div><div class="box">3</div></div>
<div class="container" style="align-content:center"><div class="box">1</div><div class="box">2</div><div class="box">3</div><div class="box">1</div><div class="box">2</div><div class="box">3</div></div>
<div class="container" style="align-content:space-between"><div class="box">1</div><div class="box">2</div><div class="box">3</div><div class="box">1</div><div class="box">2</div><div class="box">3</div></div>
<div class="container" style="align-content:stretch"><div class="box">1</div><div class="box">2</div><div class="box">3</div><div class="box">1</div><div class="box">2</div><div class="box">3</div></div>

The values are the same family as justify-content: flex-start, flex-end, center, space-between, space-around, space-evenly and stretch (the default).

Quick way to remember

A single line of items: use align-items.
Several wrapped lines in a tall container: align-content spreads the lines.

If align-content seems to do nothing, check that the container actually wraps and is taller than its content.