Flexbox | Propiedades de alineación | propiedad align‑items
Existen varias propiedades que permiten disponer los ítems. En este ejercicio conoceremos la propiedad align‑items. 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-items servirá para alinear cada uno de los items dentro de sus respectivas líneas.
CASO 1Declaración align‑items: flex-start;
La declaración align‑items: flex-start;, ajusta los items, en sus respectivas líneas, desde el inicio del eje transversal.
CASO 2Declaración align‑items: flex-end;
La declaración align‑items: flex-end;, ajusta los items, en sus respectivas líneas, al final del eje transversal.
CASO 3Declaración align‑items: center;
La declaración align‑items: center;, ajusta los items, en sus respectivas líneas, en el centro del eje transversal.
CASO 4Declaración align‑items: stretch;
La declaración align‑items: stretch;, distribuye los items, en sus respectivas líneas, desde el inicio hasta el final del eje transversal. Los items con una altura fijada se ajustan al inicio del eje transversal.
CASO 5Declaración align‑items: baseline;
La declaración align‑items: baseline;, los items, en sus respectivas líneas, se alinean respecto de su línea base (sobre la que se apoyan los contenidos de texto).