Flexbox | Propiedades de alineación | propiedad align‑content
Existen varias propiedades que permiten disponer los ítems. En este ejercicio conoceremos la propiedad align‑content. Se utiliza cuando tenemos un contenedor flex multilinea. Recordemos que un contenedor flex multilínea es aquel en el que los ítems no caben en el ancho disponible, y por lo tanto, el eje principal se divide en múltiples líneas (por ejemplo, usando flex-wrap: wrap). De esta forma, align-content servirá para alinear cada una de las líneas del contenedor multilinea.
CASO 1Declaración align‑content: flex-start;
La declaración align‑content: flex-start;, ajusta las líneas desde el inicio del eje transversal.
CASO 2Declaración align‑content: flex-end;
La declaración align‑content: flex-end;, ajusta las líneas desde el final del eje transversal.
CASO 3Declaración align‑content: center;
La declaración align‑content: center;, ajusta las líneas al rededor del centro del eje transversal.
CASO 4Declaración align‑content: space‑between;
La declaración align‑content: space‑between;, distribuye las líneas a lo largo del eje transversal, de principio a fin.
CASO 5Declaración align‑content: space‑around;
La declaración align‑content: space‑around;, distribuye las líneas a lo largo del eje transversal, igualmente espaciados.
CASO 6Declaración align‑content: stretch;
La declaración align‑content: stretch;, estira las líneas para que ocupen el eje transversal completo.