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

Rachel Andrew

A partir do Chrome 123, você pode usar a propriedade align-content do alinhamento de caixa CSS 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 seu CSS se você usou align-content fora desses métodos de layout, já que ele vai entrar em vigor agora.

Browser Support

• 123
• 123
• 125
• 17.4

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, ele tem um valor de space-between, distribuindo o espaço disponível no contêiner flexível entre as linhas flexíveis.

A propriedade align-content espaça as linhas de itens flexíveis porque o contêiner flexível tem espaço livre no eixo cruzado.

Centralizar um item verticalmente

A align-content é particularmente útil para centralizar um item verticalmente em um contêiner. Para isso, use display: flex com align-content: center. Isso faz com que o item se torne um item flexível, e outros comportamentos padrão de itens flexíveis também entram em vigor. No exemplo a seguir, o cabeçalho é centralizado verticalmente com align-content: center. Isso faz com que o item seja reduzido para se ajustar ao conteúdo. Portanto, é necessário aplicar flex-grow: 1 ao item.

A propriedade align-content centraliza o cabeçalho verticalmente em um contêiner flexível.

Com o align-content disponível para o layout de bloco, é possível conseguir alinhamento vertical sem precisar criar um layout flexível para que a propriedade funcione. Nenhuma propriedade adicional é necessária, já que o item continua sendo um item de bloco. A única mudança é no alinhamento.

A propriedade align-content centraliza o cabeçalho verticalmente em um contêiner de bloco (requer o Chrome 123 ou o Safari 17.4 ou versões mais recentes).

Teste de suporte a align-content em layouts de bloco

Infelizmente, não é possível testar o suporte a align-content no layout de bloco. Como align-content é compatível há muito tempo com layouts flexíveis e de grade, usar consultas de recursos com @supports sempre vai retornar "true". Essa é a mesma situação que aconteceu com a propriedade gap no flexbox. O grupo de trabalho do CSS está buscando uma solução para implementações parciais como essa.

Verificar se há alinhamento inesperado nos sites

A propriedade align-content é definida há muitos anos na especificação como trabalhando em layouts de bloco. Como nenhum navegador era compatível com align-content fora desses contextos, nada acontecia. No entanto, se você adicionou a propriedade a algo que não é 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 o caso.