Todos los principales motores del navegador ahora admiten la última alineación del modelo de referencia en la cuadrícula de CSS y flexbox.
Navegadores compatibles
- 108
- 108
- 52
- 16.2
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
.