Propriedade align-items
Última atualização: 2026-09-13
align-items Propriedade align-items
A propriedade align-items define o alinhamento de todos os itens flex no eixo transversal, controlando a posição na direção perpendicular ao eixo principal. Seu valor padrão é stretch, que faz os itens se esticarem para preencher a altura do contêiner ao longo do eixo transversal. A propriedade é comumente usada para centralização vertical, alinhamento superior, inferior e na linha de base.
| Categoria | |
|---|---|
| Valor Inicial | normal |
| Herdado | Não |
| Aplica-se A | todos |
| Tipo de Animação | discrete |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
align-items: normal | stretch | center | start | end | self-start | self-end | flex-start | flex-end | baseline;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
normal | stretch | flex-start | flex-end | center | baseline | Palavra-chave | Alinhamento 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-items | ✓ v29 | ✓ v12 | ✓ v28 | ✓ v9 | ✓ v17 |
| Suportado em todos os principais navegadores | |||||
Dica： Combinar justify-content: center com align-items: center centraliza os itens flex tanto na horizontal quanto na vertical — uma das receitas de centralização mais comuns no flexbox.
Aviso： baseline alinha os itens em suas linhas de base de texto, o que é útil quando os tamanhos de fonte diferem. Se um item não tiver conteúdo de texto, sua borda inferior é tratada como a linha de base, o que pode produzir resultados inesperados.
❓ Perguntas Frequentes
QQual é a diferença entre align-items e align-self?
AO align-items é definido no contêiner flex e dá a todos os filhos o mesmo alinhamento no eixo transversal. O align-self é definido em um único item flex e substitui o padrão do contêiner apenas para aquele item, o que é exatamente o que você precisa quando um item deve se destacar enquanto os demais mantêm o alinhamento do contêiner. O align-self sempre tem prioridade maior que o align-items. O par justify-items e justify-self segue a mesma relação de padrão do contêiner versus substituição por item.
QPor que o align-items: center não centraliza meus itens verticalmente?
AO align-items atua no eixo transversal. Se o contêiner não tiver altura explícita e sua altura for determinada pelo conteúdo, não há espaço sobrando no eixo transversal, então a centralização não é perceptível. Uma armadilha comum: com o padrão align-items: stretch e sem altura no contêiner, a centralização parece não fazer nada porque o eixo transversal não tem espaço livre para atuar. Dê ao contêiner uma altura definida, por exemplo height: 200px. Para centralizar também no eixo principal, adicione justify-content: center.
QPor que o align-items: stretch não funciona?
AO stretch só se aplica quando os itens não têm um tamanho explícito no eixo transversal. Com o eixo principal em row, se um item definir height, o stretch é substituído e o item é renderizado com sua própria altura. Da mesma forma, se o contêiner não tiver um tamanho definido no eixo transversal, não há o que esticar. Para fazer o stretch funcionar, mantenha o tamanho dos itens no eixo transversal como auto e dê ao contêiner um tamanho definido nessa direção.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
Align Self
Substitui o alinhamento no eixo transversal de um único item.
Alinhamento no Eixo Principal
Controla como os itens se alinham no eixo principal.
