Propriedade de Alinhamento no Eixo Principal
Última atualização: 2026-09-13
justify-content Propriedade de Alinhamento no Eixo Principal
A propriedade justify-content define como os itens flex são alinhados ao longo do eixo principal e como o espaço entre os itens e entre os itens e as bordas do container é distribuído. É a propriedade de alinhamento mais usada no flexbox e suporta arranjos left, right, center, space-between, space-around e space-evenly. O eixo principal é determinado por flex-direction.
| Categoria | |
|---|---|
| Valor Inicial | normal |
| Herdado | Não |
| Aplica-se A | todos |
| Tipo de Animação | discrete |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
justify-content: normal | start | end | flex-start | flex-end | center | left | right | space-between | space-around | space-evenly | stretch;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
normal | flex-start | flex-end | center | space-between | space-around | space-evenly | Palavra-chave | Alinhamento no eixo principal. |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| justify-content | ✓ v29 | ✓ v12 | ✓ v28 | ✓ v9 | ✓ v17 |
| Suportado em todos os principais navegadores | |||||
Dica： space-between empurra o primeiro e o último itens para encostar nas bordas e espaça os do meio uniformemente; space-around dá a cada item espaço igual em ambos os lados, então as lacunas nas bordas são metade das lacunas internas; space-evenly torna todas as lacunas exatamente iguais.
Importante： justify-content atua no eixo principal. Se flex-direction for column, ele controla o alinhamento vertical e você precisa de uma altura definida no container para ver algum efeito.
❓ Perguntas Frequentes
QQual é a diferença entre space-between, space-around e space-evenly?
Aspace-between coloca o primeiro e o último itens encostados nas bordas e espaça os do meio uniformemente. space-around dá a cada item espaço igual à esquerda e à direita, então as lacunas nas bordas são metade da lacuna entre dois itens. space-evenly torna toda lacuna, incluindo as das bordas, exatamente igual. Escolha space-between quando as pontas devem encostar nas bordas e space-evenly quando quiser a distribuição mais uniforme.
QQual é a diferença entre justify-content e text-align: center?
Atext-align: center alinha conteúdo inline, como texto e elementos inline, dentro de um container de bloco; atua no nível do texto. justify-content: center posiciona itens flex ao longo do eixo principal; atua no nível do layout e também suporta modos de distribuição como space-between. Os dois também coexistem: um container flex pode centralizar seus itens com justify-content enquanto o texto dentro de cada item ainda é alinhado por text-align. Use justify-content para layout e text-align para texto.
QPor que justify-content: center não funciona?
AO motivo mais comum é que o container não tem espaço sobrando: quando a largura total dos itens é igual ou excede a largura do container, não há espaço livre no eixo principal para distribuir e a centralização não tem o que atuar. Além disso, com flex-direction: column você precisa de uma altura explícita no container; caso contrário o conteúdo preenche a direção vertical e nenhum espaço resta. Verifique o eixo principal e o tamanho do container para encontrar a causa.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
Alinhamento no Eixo Cruzado
Controla como os itens se alinham no eixo cruzado.
Justify Items
Controla o alinhamento no eixo inline dos itens de grid.
