Exemplo
Fazer algum espaço em torno dos itens do flexível <div> elemento:
div
{
display: -webkit-flex; /* Safari */
-webkit-justify-content: space-around; /* Safari 6.1+ */
display: flex;
justify-content: space-around;
}
Tente você mesmo " Definição e Uso
A propriedade justificar-content alinha os itens do recipiente flexível quando os itens não use todo o espaço disponível no principal eixo (horizontally) .
Dica: Use a alinhar-itens propriedade para alinhar os itens no eixo transversal (vertically) .
| Valor padrão: | flex-start |
|---|---|
| Herdado: | no |
| Animatable: | no. Read about animatable |
| Versão: | CSS3 |
| sintaxe JavaScript: | object .style.justifyContent="space-between" Try it |
Suporte a navegadores
Os números na tabela especificar a primeira versão do browser que suporta totalmente a propriedade.
Números seguido por -webkit- ou -moz- especificar a primeira versão que trabalhou com um prefixo.
| Propriedade | |||||
|---|---|---|---|---|---|
| justify-content | 29,0 21,0 -webkit- | 11.0 | 28,0 18,0 -moz- | 9 6.1 -webkit- | 17,0 |
CSS Syntax
justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;Valores de propriedade
| Valor | Descrição | Jogue |
|---|---|---|
| flex-start | Valor padrão. Os produtos são posicionados no início do recipiente | Jogue " |
| flex-end | Os produtos são posicionados na extremidade do recipiente | Jogue " |
| center | Os produtos são posicionadas no centro do recipiente | Jogue " |
| space-between | Os itens são posicionados com espaço entre as linhas | Jogue " |
| space-around | Os produtos são posicionados com espaço antes, entre e depois das linhas | Jogue " |
| initial | Define essa propriedade para o valor padrão. Leia sobre inicial | Jogue " |
| inherit | Herda essa propriedade do seu elemento pai. Leia sobre herdar |
Páginas relacionadas
CSS Referência: align-content property
CSS Referência: align-items property
CSS Referência: align-self property
HTML DOM de referência: justifyContent property