Atributo CSS justify-content

Definição e uso

propriedade justify-content (horizontal) alinha os itens do contêiner flexível, quando os itens não ocupam todo o espaço disponível no eixo principal.

Dica:Use propriedade align-items Alinhar verticalmente os itens da propriedade.

Veja também:

Tutorial CSS:Flexbox do CSS

Tutorial CSS:CSS Grid

CSS 参考手册：propriedade align-content

CSS 参考手册：propriedade align-items

CSS 参考手册：Manual do CSS

Propriedade align-selfManual do HTML DOM

justify-content: space-between;

Propriedade justifyContent

Exibir itens flexíveis com espaçamento antes, entre e após as linhas:
  div {
  Alinhar itens flexíveis no centro do contêiner:
justify-content: space-around;

}

justify-content: center;

Mais exemplos TIY podem ser encontrados na parte inferior da página.

Sintaxe CSS

justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;

Valor do atributo Valor
Valor padrão: Descrição
Valor padrão. Os itens ficam no início do contêiner. flex-end
Os itens ficam no final do contêiner. center
Os itens ficam no centro do contêiner. space-between
Os itens têm espaço entre as linhas. space-around
Defina essa propriedade como seu valor padrão. Veja: Os itens deixam espaço antes, entre e após as linhas. Defina essa propriedade como seu valor padrão. Veja:Atributos relacionados a animação
Herda essa propriedade do elemento pai. Veja: initial Herda essa propriedade do elemento pai. Veja:Atributos relacionados a animação

inherit

Detalhes técnicos Valor padrão:
flex-start Herança:
Não Produção de animação:Não suportado. Veja:Atributos relacionados a animação
。 Versão:
CSS3 Sintaxe JavaScript:

object.style.justifyContent="space-between"

justify-content: space-between;

Mais exemplos

Exibir itens flexíveis com espaçamento antes, entre e após as linhas:
  div {
  Alinhar itens flexíveis no início do contêiner (padrão):
justify-content: space-around;

}

justify-content: space-between;

justify-content: flex-start;

Exibir itens flexíveis com espaçamento antes, entre e após as linhas:
  div {
  Alinhar itens flexíveis no final do contêiner:
justify-content: space-around;

}

justify-content: space-between;

justify-content: flex-end;

Exibir itens flexíveis com espaçamento antes, entre e após as linhas:
  div {
  Exibir itens flexíveis com espaçamento entre as linhas:
justify-content: space-around;

}

justify-content: space-between;

Exemplo

Exibir itens flexíveis com espaçamento antes, entre e após as linhas:
  div {
  display: flex;
justify-content: space-around;

}

Experimente você mesmo

Suporte do navegador

Os números na tabela indicam a primeira versão do navegador que suporta completamente essa propriedade, seguidos por -webkit- ou -moz-.

propriedade Chrome IE Firefox Safari Opera
justify-content 29.0
21.0 -webkit- 		11.0 28.0
18.0 -moz- 		9.0
6.1 -webkit- 		17.0