Todos os principais mecanismos de navegador agora oferecem suporte ao último alinhamento da linha de base na grade CSS e no flexbox.
Compatibilidade com navegadores
- 108
- 108
- 52
- 16,2
O alinhamento usando as palavras-chave first
e last
agora está disponível em todos os principais mecanismos. Isso significa que podemos usar o último alinhamento de referência como outra opção ao alinhar grupos de itens flexíveis ou de grade.
Primeiro alinhamento da linha de base
Se você definir o valor de align-items
como baseline
, o resultado será o primeiro alinhamento da linha de base. Portanto, a primeira linha de base do item que você está alinhando (descrito como o assunto de alinhamento) vai se alinhar à primeira linha de base dos outros itens do grupo. Confira isso no exemplo abaixo, em que os dois primeiros itens flexíveis são alinhados usando align-items: baseline
, de modo que se alinham ao longo da linha de base criada pelo texto maior. O item final está alinhado a flex-start
e, portanto, ao início do contêiner flexível.
Último alinhamento de valor de referência
Ao alinhar um item flexível ou de grade com o valor last baseline
, o último valor de referência desse item vai se alinhar à última linha de base do grupo de compartilhamento de linha de base de que faz parte. O exemplo a seguir demonstra o último alinhamento da linha de base, com o primeiro item flexível alinhado com a última linha de texto no item maior. O item final do grupo está alinhado a flex-end
, que é o fim do contêiner flexível.
Alinhamento de substitutos
Se o assunto do alinhamento não tiver um grupo de compartilhamento de valor de referência para se alinhar, um alinhamento substituto vai ser usado. Para baseline
e first baseline
, o alinhamento de substituto é start
e para last baseline
, o alinhamento de substituto é end
.