Flex-Start frente a alineación de línea base en Flexbox

Al trabajar con la propiedad align-self de CSS Flexbox, comprender la diferencia entre flex-start y la línea de base es crucial. Si bien inicialmente puede parecer que producen el mismo resultado, exhiben un comportamiento distinto en ciertos escenarios.

Flex-Start Alignment

flex-start alinea los elementos flexibles al principio borde del eje transversal del contenedor flexible. Esta suele ser la parte superior para orientaciones horizontales y la izquierda para orientaciones verticales.

Alineación de línea base

la línea base alinea los elementos flexibles a lo largo de la línea base de su contenido. La línea de base es la línea invisible sobre la que descansan la mayoría de las letras y debajo de la cual se extienden los descendentes.

Diferencias

En los casos en los que el tamaño de fuente y el contenido de los elementos flexibles son consistentes, flex-start y baseline producirán resultados similares. Sin embargo, cuando estos factores varían, la alineación de la línea base se vuelve más evidente.

Cuando se utiliza la alineación de la línea base, el elemento más alto de la fila determina la posición de la línea base. Los elementos flexibles se alinean de modo que sus líneas base estén alineadas, con el elemento más alejado de su borde de margen inicial colocado al ras contra ese borde.

Ejemplo

Considere el siguiente código :

.flex-container {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.flex-item {
  background-color: green;
  width: 110px;
  min-height: 100px;
  padding: 5px;
  text-align: center;
}

Con este código, los elementos flexibles se alinean utilizando sus líneas base. Se genera el siguiente resultado:

  
A
  
B
  
C
  
D
  
E

Tenga en cuenta que, aunque el contenido de los elementos flexibles varía en tamaño, todos están alineados a lo largo de la línea base.