Suporte a alinhamento de conteúdo em layouts de blocos e tabelas

Rachel Andrew

No Chrome 123, você pode usar a propriedade align-content do alinhamento de caixa CSS em layouts de blocos e tabelas. Isso permite o alinhamento de direção de blocos 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 isso agora vai entrar em vigor.

align-content em layouts flexíveis e de grade

Você provavelmente já 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 a seguir, ela tem um valor de space-between, portanto, está distribuindo o espaço disponível no contêiner flexível entre as linhas flexíveis.

Centralizar um item verticalmente

O align-content é particularmente ú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 um item flexível, e outros comportamentos de item flexível padrão também entram em vigor. No exemplo abaixo, o cabeçalho é centralizado verticalmente com align-content: center, o que faz com que o item seja reduzido para caber no conteúdo. Portanto, é necessário aplicar flex-grow: 1 ao item.

Com o align-content disponível para o layout de blocos, é possível alcançar o alinhamento vertical sem precisar criar um layout flexível para que a propriedade funcione. Nenhuma outra propriedade é necessária, já que o item permanece em bloco, a única mudança é no alinhamento.

Testar o suporte a align-content em layouts de blocos

Infelizmente, não é possível testar a compatibilidade com align-content no layout de blocos. Como align-content é compatível há muito tempo no layout flexível e de grade, o uso de consultas de recurso com @supports sempre retorna verdadeiro. Essa é a mesma situação que aconteceu com a propriedade gap no flexbox. O grupo de trabalho do CSS está explorando uma solução para implementações parciais como esta.

Verifique se há alinhamento inesperado nos seus sites

A propriedade align-content foi definida há muitos anos na especificação (link em inglês) como trabalhando em layouts de blocos. Como nenhum navegador era compatível com align-content fora desses contextos, ele não fez nada. No entanto, se você tiver adicionado a propriedade a algo que não seja um contêiner flexível ou de grade, ela vai começar a ter efeito a partir do Chrome 123. Pesquise no seu CSS o uso de align-content e use a versão Beta para testar seus sites e aplicativos, se esse for seu caso.