Propriedade Justify Items
Última atualização: 2026-09-13
justify-items Propriedade Justify Items
A propriedade justify-items define o alinhamento padrão de todos os itens no eixo inline (linha) dentro do contêiner. Ela se aplica principalmente a layouts grid e não tem efeito no flexbox. É a contraparte por item do justify-content: alinha cada item dentro de sua própria célula do grid em vez dos itens como um grupo. Seu valor padrão é stretch, que estica os itens para preencher a célula.
| Categoria | |
|---|---|
| Valor Inicial | legacy |
| Herdado | Não |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
justify-items: normal | stretch | start | end | self-start | self-end | center | left | right | baseline | legacy;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
normal | stretch | start | end | center | left | right | legacy | Palavra-chave | Alinhamento dos itens 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-items | ✓ v29 | ✓ v12 | ✓ v28 | ✓ v9 | ✓ v17 |
| Suportado em todos os principais navegadores | |||||
Aviso： O justify-items não tem efeito no flexbox; aplica-se apenas ao grid. Em um layout flex, use justify-content para alinhar os itens.
Dica： O valor legacy de justify-items existe para compatibilidade com navegadores antigos e deve ser usado em conjunto com justify-self: legacy. Novos projetos devem evitá-lo.
❓ Perguntas Frequentes
QQual é a diferença entre justify-items e justify-content?
AO justify-items atua em cada item do grid e controla como o item é alinhado dentro de sua própria célula ao longo do eixo inline (horizontal). O justify-content atua na área de conteúdo do grid inteiro e controla como as trilhas são distribuídas dentro do contêiner. Os dois níveis são independentes e podem ser combinados: o justify-content distribui o espaço restante do contêiner, enquanto o justify-items alinha cada item dentro de sua célula.
QPor que o justify-items não funciona no flexbox?
AO flexbox não tem conceito de células de grid; os itens são colocados diretamente no contêiner, então o justify-items não tem a que se aplicar. No flexbox, use justify-content para distribuir os itens ao longo do eixo principal e align-items para alinhá-los no eixo transversal. O mesmo se aplica a align-items e align-self: eles atendem ao grid no eixo de bloco e também funcionam no flex, enquanto o par justify-* é exclusivo do grid. O justify-items e sua forma por item justify-self servem principalmente a layouts grid.
QComo centralizo o conteúdo de cada célula do grid horizontalmente?
ADuas formas: escreva justify-items: center no contêiner para centralizar horizontalmente todo item do grid em sua célula, ou escreva justify-self: center em um único item. Não use justify-content: center aqui — ele posiciona toda a área de conteúdo do grid dentro do contêiner. Lembre-se também de que o padrão justify-items: stretch faz o item preencher a célula inteira, então a centralização só surte efeito depois que o item deixa de ser esticado; os valores start ou center fazem o item encolher primeiro até a largura do conteúdo. Para centralizar verticalmente ao mesmo tempo, use place-items: center.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
Alinhamento do Eixo Principal
Controla como os itens se alinham no eixo principal
Alinhamento do Eixo Transversal
Controla como os itens se alinham no eixo transversal
