Alineación de línea base versus inicio flexible

En el diseño flexible, inicio flexible alinea elementos al inicio del eje transversal, mientras que la línea base los alinea a lo largo de la línea base de su contenido.

Alineación de línea base

Como sugiere el nombre, La alineación de la línea de base ancla las líneas de base de los elementos flexibles, las líneas donde se sientan la mayoría de los personajes. El elemento con la distancia máxima entre su línea base y el borde de inicio cruzado estará alineado contra ese borde.

Diferencia visual

Cuando los tamaños de fuente de los elementos flexibles son uniformes o el contenido es idéntico, flex-start y baseline pueden parecer intercambiables. Sin embargo, surgen diferencias cuando varían los tamaños de los elementos.

Determinación de la línea de base

El elemento más alto de una fila determina la línea de base para la alineación de la línea de base.

Ejemplo

Considere el siguiente fragmento de código:

.flex-container {
  align-items: baseline;
  ...
}
...
.flex-item {
  font-size: 2em;
  ...
}
...
.flex-item.item2 {
  font-size: 7em;
}

El elemento con el tamaño de fuente más grande, "B", determinará la línea base para la fila. Los demás elementos se alinearán a lo largo de la línea base de "B", como se muestra en la imagen a continuación.

[Imagen de elementos flexibles alineados a diferentes alturas usando la alineación de la línea base]

Nota importante

La palabra clave base no es compatible con todos los navegadores. Para compatibilidad entre navegadores, considere usar align-items: flex-start junto con la propiedad vertical-align de CSS3.