Alinhamento da linha de base vs Flex-Start

No layout flexível, o flex-start alinha os itens no início do eixo cruzado, enquanto a linha de base alinha-os ao longo da linha de base do conteúdo.

Alinhamento da linha de base

Como o nome sugere, o alinhamento da linha de base ancora as linhas de base dos itens flexíveis, as linhas onde a maioria dos personagens fica. O item com a distância máxima entre sua linha de base e a borda de início cruzado ficará alinhado com essa borda.

Diferença visual

Quando os tamanhos de fonte dos itens flexíveis são uniformes ou o conteúdo for idêntico, o início flexível e a linha de base podem parecer intercambiáveis. No entanto, diferenças surgem quando os tamanhos dos itens variam.

Determinando a linha de base

O item mais alto em uma linha determina a linha de base para o alinhamento da linha de base.

Exemplo

Considere o seguinte snippet de código:

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

O item com o maior tamanho de fonte, "B", determinará a linha de base da linha. Os outros itens serão alinhados ao longo da linha de base de "B", conforme mostrado na imagem abaixo.

[Imagem de itens flexíveis alinhados em alturas variadas usando alinhamento de linha de base]

Nota importante

A palavra-chave de linha de base não é compatível com todos os navegadores. Para compatibilidade entre navegadores, considere usar align-items: flex-start em conjunto com a propriedade vertical-align do CSS3.