Último alinhamento da linha de base

Todos os principais mecanismos de navegador agora oferecem suporte ao último alinhamento da linha de base na grade CSS e no flexbox.

Rachel Andrew

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.

Parte da série Newly interoperável (em inglês)