Flexbox | Propiedades de alineación | propiedad align‑self
Existen varias propiedades que permiten disponer los ítems. En este ejercicio conoceremos la propiedad align‑self. Permite cambiar el comportamiento de align‑items y sobreescribirlo con comportamientos específicos para ítems concretos que no queremos que se comporten igual que el resto. Si se especifica el valor auto a la propiedad align‑self, el navegador le asigna el valor de la propiedad align‑items del contenedor padre, y en caso de no existir, el valor por defecto (stretch).
CASO 1Declaración align‑self: flex-start;
La declaración align‑self: flex-start;, ajusta los items seleccionados, en sus respectivas líneas, desde el inicio del eje transversal.
CASO 2Declaración align‑self: flex-end;
La declaración align‑self: flex-end;, ajusta los items seleccionados, en sus respectivas líneas, al final del eje transversal.
CASO 3Declaración align‑self: center;
La declaración align‑self: center;, ajusta los items seleccionados, en sus respectivas líneas, en el centro del eje transversal.
CASO 4Declaración align‑self: stretch;
La declaración align‑self: stretch;, distribuye los items seleccionados, 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‑self: baseline;
La declaración align‑self: baseline;, los items seleccionados, en sus respectivas líneas, se alinean respecto de su línea base (sobre la que se apoyan los contenidos de texto).
CASO 6Declaración align‑self: auto;
La declaración align‑self: auto;, los items seleccionados, en sus respectivas líneas, se alinean respecto de su línea base (sobre la que se apoyan los contenidos de texto).