Última alineación de referencia

Todos los principales motores del navegador ahora admiten la última alineación del modelo de referencia en la cuadrícula de CSS y flexbox.

Rachel Andrew

La alineación con las palabras clave first y last ahora está disponible en todos los motores principales. Esto significa que podemos usar la última alineación del modelo de referencia como otra opción cuando se alinean grupos de elementos flexibles o de cuadrícula.

Primera alineación del modelo de referencia

Si estableces el valor de align-items en baseline, el resultado será la primera alineación del modelo de referencia. Por lo tanto, el primer modelo de referencia del elemento que estás alineando (descrito como el sujeto de alineación) se alineará con el primer modelo de referencia de los otros elementos del grupo. Puedes ver esto en el siguiente ejemplo, en el que los dos primeros elementos flexibles se alinean con align-items: baseline, por lo que se alinean a lo largo de la línea de base creada por el texto más grande. El último elemento se alinea con flex-start y, por lo tanto, se alinea con el inicio del contenedor flexible.

Última alineación del modelo de referencia

Cuando alineas una cuadrícula o un elemento flexible con el valor last baseline, el último modelo de referencia de ese elemento se alineará con el último modelo de referencia del grupo de uso compartido del modelo de referencia del que forma parte. En el siguiente ejemplo, se demuestra la última alineación del modelo de referencia, en la que el primer elemento flexible se alinea con la última línea de texto del elemento más grande. El último elemento de este grupo se alinea con flex-end, que es el final del contenedor flexible.

Alineación de resguardo

Si el sujeto de la alineación no tiene un grupo de uso compartido de referencia, se usará una alineación de resguardo. Para baseline y first baseline, la alineación de resguardo es start y, para last baseline, la alineación de resguardo es end.

Parte de la serie Renovadamente interoperable