Propriedade Align Content
Última atualização: 2026-09-13
align-content Propriedade Align Content
A propriedade align-content define como várias linhas de itens flex são alinhadas e espaçadas no eixo transversal. Ela só tem efeito quando a quebra de linha (flex-wrap: wrap) produz mais de uma linha. Funciona como justify-content, mas atua no eixo transversal e distribui o espaço entre as linhas. Em uma única linha a propriedade não faz nada; use align-items em vez disso.
| Categoria | |
|---|---|
| Valor Inicial | normal |
| Herdado | Não |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
align-content: normal | stretch | start | end | flex-start | flex-end | center | space-between | space-around | space-evenly | baseline;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
normal | stretch | flex-start | flex-end | center | space-between | space-around | Palavra-chave | Alinhamento de várias linhas no eixo transversal |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| align-content | ✓ v29 | ✓ v12 | ✓ v28 | ✓ v9 | ✓ v17 |
| Suportado em todos os principais navegadores | |||||
Aviso： O align-content só funciona em um layout flex de várias linhas. Se os itens não quebram (linha única), a propriedade não tem efeito; nesse caso use align-items para controlar o alinhamento no eixo transversal.
Dica： O align-content e o align-items podem ser combinados: o align-content distribui as linhas entre si, enquanto o align-items alinha os itens dentro de cada linha no eixo transversal.
❓ Perguntas Frequentes
QQual é a diferença entre align-content e align-items?
AO align-items controla como os itens se alinham no eixo transversal dentro de uma única linha. O align-content controla como as linhas, como um grupo, são distribuídas no eixo transversal. Em uma linha única o align-content não faz nada; com várias linhas, o align-items gerencia os itens dentro de cada linha enquanto o align-content distribui o espaço entre as linhas. Ambos podem ser definidos ao mesmo tempo porque trabalham em níveis diferentes.
QPor que o align-content não tem efeito visível?
ARazões possíveis: os itens não quebram (layout de linha única), o contêiner não tem altura definida, ou flex-wrap ainda é nowrap. O align-content só funciona quando flex-wrap: wrap produz várias linhas e o contêiner tem espaço restante no eixo transversal. Verifique flex-wrap e a altura do contêiner para encontrar a causa; uma linha única significa que não há o que distribuir. Uma forma rápida de decidir qual propriedade usar: uma linha significa definir align-items, enquanto várias linhas quebradas que precisam de espaçamento pedem align-content.
QComo centralizo verticalmente como um todo várias linhas flex quebradas?
ATrate em duas camadas: defina align-content: center no contêiner para que o grupo de linhas seja centralizado no eixo transversal (vertical). Se os itens dentro de uma linha tiverem alturas diferentes, adicione também align-items: center para que os itens em cada linha se centralizem verticalmente. Isso só funciona quando o contêiner tem altura definida e flex-wrap: wrap produz mais de uma linha; caso contrário, align-content não tem efeito.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
Alinhamento do Eixo Transversal
Controla como os itens se alinham no eixo transversal dentro de uma linha
Alinhamento do Eixo Principal
Controla como os itens se alinham no eixo principal
