Como utilizar align-content en CSS

Definición de .align-content utilizado en CSS

La propiedad .align-content es una subproperiedad del módulo de diseño de caja flexible.

Si quieres utilizar esta propiedad de CSS en tu hoja de estilos, hazlo de la siguiente forma:

align-content: flex-start | flex-end | center | space-between | space-around | stretch

.flex-container {
  align-content: space-around;
}

Otro ejemplo más avanzado de .align-content es el siguiente de CODEPEN:

align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;

Valor	Descripción	Manifestación
tramo	Valor por defecto. Las líneas se estiran para ocupar el espacio restante
centro	Las líneas se empaquetan hacia el centro del contenedor flexible
arranque flexible	Las líneas se empaquetan hacia el inicio del contenedor flexible
extremo flexible	Las líneas se empaquetan hacia el final del contenedor flexible
espacio entre	Las líneas se distribuyen uniformemente en el contenedor flexible
espacio alrededor	Las líneas se distribuyen uniformemente en el contenedor flexible, con espacios de la mitad del tamaño en cada extremo
uniformemente en el espacio	Las líneas se distribuyen uniformemente en el contenedor flexible, con el mismo espacio a su alrededor
inicial	Establece esta propiedad en su valor predeterminado.
heredar	Hereda esta propiedad de su elemento principal.

Los números de la tabla especifican la primera versión del navegador que es plenamente compatible con la propiedad.

Los números seguidos de -webkit- especifican la primera versión que funcionó con un prefijo.

Property	Chrome	Internet Explorer / Edge	Firefox	Safari	Opera
align-items	21.0	11.0	20.0	9.0 7.0 -webkit-	12.1