Atributo justifyContent do Style

Definição e Uso

Quando os itens não usam todo o espaço disponível no eixo principal (horizontal), justifyContent Alinha itens no contêiner flexível.

Dica:Use alignContent Alinha itens no eixo horizontal (vertical).

Veja também:

Manual de Referência do CSS:Atributo justifyContent

Exemplo

Deixe um espaço entre os itens do <div> flexível:

document.getElementById("main").style.justifyContent = "space-between";

Experimente Você Mesmo

Sintaxe

Retornar justifyContent:

object.style.justifyContent

Definir justifyContent:

object.style.justifyContent = "flex-start|flex-end|center|space-between|space-around|initial|inherit"

Valor do Atributo

Valor Descrição
flex-start Valor Padrão. Itens localizados no início do contêiner.
flex-end Itens localizados no extremo do contêiner.
center Itens localizados no centro do contêiner.
space-between Deixe espaço para itens entre as linhas.
space-around Deixe espaço para itens antes, entre e após a linha.
initial Defina este atributo para seu valor padrão. Veja initial.
inherit Herda este atributo do elemento pai. Veja inherit.

Detalhes Técnicos

Valor Padrão: flex-start
Retorno: String que representa o Atributo justifyContent.
Versão do CSS: CSS3

Suporte do Navegador

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Suporte 12.0 Suporte 9.0 Suporte

Páginas Relacionadas

Manual de Referência do STYLE DOM HTML:Atributo alignContent

Manual de Referência do STYLE DOM HTML:Atributo alignItems

Manual de Referência do STYLE DOM HTML:Propriedade alignSelf