Flex-Start vs. Alinhamento de linha de base no Flexbox

Ao trabalhar com a propriedade align-self do CSS Flexbox, entendendo a diferença entre flex-start e a linha de base é crucial. Embora inicialmente pareçam produzir o mesmo resultado, eles exibem um comportamento distinto em determinados cenários.

Flex-Start Alignment

flex-start alinha itens flexíveis no início borda do eixo transversal do flex container. Geralmente é a parte superior para orientações horizontais e a esquerda para orientações verticais.

Alinhamento da linha de base

baseline alinha itens flexíveis ao longo da linha de base do conteúdo. A linha de base é a linha invisível sobre a qual a maioria das letras repousa e abaixo da qual os descendentes se estendem.

Diferenças

Nos casos em que o tamanho da fonte e o conteúdo dos itens flexíveis são consistentes, flex-start e linha de base produzirão resultados semelhantes. No entanto, quando esses fatores variam, o alinhamento da linha de base se torna mais aparente.

Ao usar o alinhamento da linha de base, o item mais alto na linha determina a posição da linha de base. Os itens flexíveis são alinhados de forma que suas linhas de base fiquem alinhadas, com o item mais distante da borda da margem inicial sendo colocado nivelado contra essa borda.

Exemplo

Considere o código a seguir :

.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;
}

Com este código, os itens flexíveis são alinhados usando suas linhas de base. A seguinte saída é gerada:

  
A
  
B
  
C
  
D
  
E

Observe que, embora o conteúdo dos itens flexíveis varie em tamanho, eles estão todos alinhados ao longo da linha de base.