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

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

  • Chrome: 123.
  • Edge: 123.
  • Firefox: 125.
  • Safari: 17.4.

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.

A propriedade 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.

A propriedade 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.

A propriedade 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.