Propriedade Align Self
Última atualização: 2026-09-13
align-self Propriedade Align Self
A propriedade align-self define o alinhamento no eixo transversal de um único item flex, sobrescrevendo o padrão align-items do contêiner. Seu valor padrão é auto, que herda o valor align-items do contêiner. Com ela, um item pode se alinhar de forma diferente dos outros — por exemplo, um item centralizado enquanto o resto está alinhado ao topo — o que é muito útil em barras de navegação e layouts de cartões.
| Categoria | |
|---|---|
| Valor Inicial | auto |
| Herdado | Não |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
align-self: auto | normal | stretch | center | start | end | self-start | self-end | flex-start | flex-end | baseline;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
auto | normal | stretch | flex-start | flex-end | center | baseline | Palavra-chave | Alinhamento de um único item 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-self | ✓ v29 | ✓ v12 | ✓ v28 | ✓ v9 | ✓ v17 |
| Suportado em todos os principais navegadores | |||||
Dica： align-self: auto herda a configuração align-items do contêiner. Para restaurar um item ao alinhamento padrão, basta definir align-self: auto.
Importante： O align-self só tem efeito em layouts flex e grid. No flexbox, atua no eixo transversal; no grid, atua no eixo de bloco.
❓ Perguntas Frequentes
QQual é a diferença entre align-self e align-items?
AO align-items é definido no contêiner flex e dá a cada filho o mesmo alinhamento no eixo transversal. O align-self é definido em um único item flex e substitui o alinhamento padrão desse item; seu próprio valor padrão é auto, que herda o align-items do contêiner. O align-self tem prioridade maior que align-items e é comumente usado para centralizar um item enquanto os outros mantêm o padrão.
QQuando devo usar align-self: baseline?
Abaseline alinha todos os itens em suas linhas de base de texto, o que fica mais arrumado quando os tamanhos de fonte diferem. Por exemplo, quando uma barra de navegação contém tanto um título grande quanto itens de menu pequenos, ou quando datas ficam ao lado de descrições em uma linha do tempo, align-self: baseline alinha as linhas de base do texto com mais precisão do que center ou flex-end. Quando os itens quebram em várias linhas, a linha de base se aplica por linha, o que geralmente é o comportamento desejado para linhas alinhadas de cartões de conteúdo misto.
QQual direção o align-self controla quando flex-direction é column?
AO align-self sempre atua no eixo transversal. Com um eixo principal em linha, o eixo transversal é vertical, então ele controla a posição vertical; depois de mudar para column, o eixo transversal se torna horizontal e o align-self controla a posição horizontal. A mesma lógica se estende ao grid, onde align-self atua no eixo de bloco, o vertical em um modo de escrita horizontal. Para saber qual direção se aplica, primeiro verifique flex-direction — o eixo transversal é sempre perpendicular ao eixo principal.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
Alinhamento do Eixo Transversal
Controla como todos os itens se alinham no eixo transversal
Justify Self
Substitui o alinhamento no eixo inline de um único item
