Exemplo
Faça algum espaço entre os itens do flexível <div> elemento:
document.getElementById("main".style.justifyContent = "space-between"; Tente você mesmo " Definição e Uso
A propriedade justifyContent alinha itens do recipiente flexível quando os itens não use todo o espaço disponível no principal eixo (horizontally) .
Dica: Use a propriedade alignContent para alinhar os itens no eixo transversal (vertically) .
Suporte navegador
A propriedade justificar-conteúdo é suportado no Firefox, Opera e Chrome.
Sintaxe
Devolver o imóvel justifyContent:
object .style.justifyContent Defina a propriedade justifyContent:
object .style.justifyContent="flex-start|flex-end|center|space-between|space-around|initial|inherit"
Valores de propriedade
| Valor | Descrição |
|---|---|
| flex-start | Valor padrão. Os produtos são posicionados no início do recipiente |
| flex-end | Os produtos são posicionados na extremidade do recipiente |
| center | Os produtos são posicionadas no centro do recipiente |
| space-between | Os produtos são posicionados com o espaço entre as linhas |
| space-around | Os produtos são posicionados com espaço antes, entre e depois das linhas |
| initial | Define essa propriedade para seu valor padrão. Leia sobre inicial |
| inherit | Herda esta propriedade a partir de seu elemento pai. Leia sobre herdar |
Detalhes técnicos
| Valor padrão: | flex-start |
|---|---|
| Valor de retorno: | A String, que representa a propriedade justificar-conteúdo de um elemento |
| CSS Versão | CSS3 |
Páginas relacionadas
Referência CSS: justify-content property
HTML DOM estilo de referência: alignContent property
HTML DOM estilo de referência: alignItems property
HTML DOM estilo de referência: alignSelf property
<Estilo de objeto