No Chrome 123, é possível usar a propriedade align-content
do CSS Box Alignment
em layouts de bloco e tabela. Isso permite o alinhamento da direção do bloco sem
precisar criar um layout flexível ou de grade. No entanto, talvez seja necessário atualizar o
CSS se você tiver usado align-content
fora desses métodos de layout, já que ele
agora vai entrar em vigor.
Browser Support
align-content
em layouts flexíveis e de grade
Você provavelmente usou align-content
para alinhar itens flexíveis ou faixas de grade. Em um
layout flexível, a propriedade align-content
é usada no contêiner flexível para alinhar
os itens flexíveis no eixo cruzado. No exemplo abaixo, ele tem um valor de
space-between
, então ele está distribuindo o espaço disponível no flex container
entre as linhas flex.
align-content
espaça as linhas de itens flexíveis, porque o contêiner flexível tem
espaço extra no eixo cruzado.Centralizar um item verticalmente
A align-content
é especialmente útil para centralizar um item verticalmente
em um contêiner. Para fazer isso, use display: flex
com
align-content: center
. Isso faz com que o item se torne flexível, e outros
comportamentos padrão do item flexível também são aplicados. No exemplo abaixo, o
cabeçalho está centralizado verticalmente com align-content: center
. Isso faz com que o
item encolha para caber no conteúdo. Portanto, é necessário aplicar flex-grow: 1
ao item.
align-content
centraliza o título verticalmente em um contêiner flexível.Com o align-content
disponível para o layout de bloco, você poderá alcançar
o alinhamento vertical sem precisar criar um layout flexível para que a propriedade
funcione. Nenhuma propriedade extra é necessária, já que o item continua sendo um item de bloco. A
única mudança é no alinhamento.
align-content
centraliza o título verticalmente em um contêiner de bloco (precisa do Chrome
123 ou do Safari 17.4 ou mais recente).Teste de suporte a align-content
em layouts de bloco
Não é possível testar o suporte a align-content
no layout
de bloco. Como o align-content
tem suporte há muito tempo no layout flexível e de grade, o uso de consultas de recursos com @supports
sempre retornará verdadeiro. Essa é
a mesma situação que aconteceu com a propriedade gap
no flexbox. O grupo de trabalho do CSS
está analisando uma solução para implementações parciais como
essa.
Verificar se há alinhamento inesperado nos seus sites
A propriedade align-content
foi definida há muitos anos na
especificação como
trabalhando em layouts de blocos. Como nenhum navegador oferece suporte a align-content
fora desses
contextos, ele não fez nada. No entanto, se você adicionou a propriedade a
algo que não é um flex ou um contêiner de grade, ela vai começar a ter efeito
a partir do Chrome 123. Pesquise o CSS para uso de align-content
e use a versão Beta para
testar seus sites e aplicativos, se for o caso.