Propriedade Justify Self
Última atualização: 2026-09-13
justify-self Propriedade Justify Self
A propriedade justify-self define o alinhamento no eixo inline de um único item, sobrescrevendo o padrão justify-items do contêiner. Ela se aplica principalmente a layouts grid e não tem efeito no flexbox. Com ela, um item pode se alinhar independentemente dentro de sua célula sem afetar como os outros itens se alinham.
| Categoria | |
|---|---|
| Valor Inicial | auto |
| Herdado | Não |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
justify-self: auto | normal | stretch | start | end | self-start | self-end | center | left | right | baseline;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
auto | normal | stretch | start | end | center | left | right | Palavra-chave | Alinhamento de um único item no eixo inline |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| justify-self | ✓ v29 | ✓ v12 | ✓ v28 | ✓ v9 | ✓ v17 |
| Suportado em todos os principais navegadores | |||||
Aviso： O justify-self não tem efeito no flexbox; aplica-se apenas ao grid. Em um layout flex, use align-self para alinhar um único item no eixo transversal.
Dica： justify-self: auto herda a configuração justify-items do contêiner; justify-self: normal se comporta como stretch.
❓ Perguntas Frequentes
QQual é a diferença entre justify-self e justify-items?
AO justify-items é definido no contêiner do grid e especifica o alinhamento horizontal padrão de todo item do grid. O justify-self é definido em um único item do grid e substitui o padrão desse item. O padrão de justify-self é auto, que simplesmente herda justify-items do contêiner, então um item não definido sempre segue o padrão do contêiner. O justify-self tem prioridade maior que justify-items, o que é ideal quando alguns itens precisam de um alinhamento especial dentro de suas células enquanto o resto mantém o padrão.
QPor que o justify-self não funciona no flexbox?
AO flexbox não tem células de grid; os itens ficam diretamente no contêiner, então o justify-self não tem a que se aplicar. No flexbox, alinhar um único item geralmente é feito com margin: auto ou com um contêiner flex aninhado, por exemplo justify-content: space-between combinado com margin-left: auto para empurrar um item para a direita. Se você só precisa empurrar um item para a borda, o truque da margin automática costuma ser mais simples e funciona em todos os navegadores compatíveis com flex.
QQual é a diferença entre justify-self: center e margin: auto?
Ajustify-self: center é o alinhamento fornecido pela especificação Box Alignment e centraliza o item do grid horizontalmente dentro de sua célula. O margin: auto alcança o mesmo resultado visual porque as margens automáticas absorvem o espaço restante, mas no grid também absorve espaço em ambos os lados, o que pode conflitar com outros valores de alinhamento. O justify-self tem semântica mais clara, mantém os dois eixos independentes e também suporta as palavras-chave start, end, stretch e outras, por isso é o modo recomendado dentro de layouts grid.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
Justify Items
Define o alinhamento padrão no eixo inline de todos os itens
Align Self
Substitui o alinhamento no eixo transversal de um único item
