align-content

Reparte el espacio entre las líneas de un contenedor flex en el eje cruzado. Solo tiene efecto cuando hay varias líneas, es decir, con flex-wrap: wrap.

stretch (predeterminado): las líneas se estiran para ocupar el espacio disponible.
flex-start: agrupa las líneas al inicio.
center: agrupa las líneas en el centro.
flex-end: agrupa las líneas al final.
space-between: la primera y la última línea tocan los bordes y el resto se reparte entre ellas.
space-around: deja el mismo espacio alrededor de cada línea.
space-evenly: deja espacios idénticos entre las líneas y en los bordes.

Ejemplo

Este contenedor tiene altura fija y varias líneas. Cambia align-content para repartir las filas. Si quitas flex-wrap en el editor, verás que deja de tener efecto.

ResultadoEn vivoAncho del contenedor30%

html

<div class="container">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
</div>

<div class="container">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
</div>

css

.container {
  border: 1px solid #2b7de0;
  display: flex;
  gap: 1rem;
  align-content: stretch;
  flex-wrap: wrap;
  height: 16rem;
  padding: 0.5rem;
}

.child {
  padding: 1rem;
}

.container {
  border: 1px solid #2b7de0;
  display: flex;
  gap: 1rem;
  align-content: stretch;
  flex-wrap: wrap;
  height: 16rem;
  padding: 0.5rem;
}

.child {
  padding: 1rem;
}

Edita el código o usa los selectores: el resultado cambia al instante.