Modificador justificar conteúdo

O modificador FolEs justificar-conteúdo define como o navegador distribui o espaço entre e ao redor dos itens ao longo do eixo principal de um contêiner flexível.

O alinhamento é feito após a aplicação dos comprimentos e margens automáticas, ou seja, se houver pelo menos um elemento flexível em um layout Flexbox com a propriedade flex-crescimento sendo diferente de 0, este modificador não terá efeito, pois não haverá espaço disponível.

Sintaxe

/* Valores de posição */
justificar-conteúdo: centro; 
justificar-conteúdo: inicio; 
justificar-conteúdo: fim; 
justificar-conteúdo: flex-início; /* Alinha itens flexíveis no início */
justificar-conteúdo: flex-fim; /* Alinha itens flexíveis no fim */
justificar-conteúdo: esquerda; 
justificar-conteúdo: direita; 

/* Alinhamento normal */
justificar-conteúdo: normal;

/* Alinhamento distribuído */
justificar-conteúdo: espaço-entre; 
justificar-conteúdo: espaço-ao-redor; 
justificar-conteúdo: espaço-uniforme; 
justificar-conteúdo: esticar; 

/* Alinhamento com conteúdo vazado */
justificar-conteúdo: seguro centro;
justificar-conteúdo: inseguro centro;

/* Valores globais */
justificar-conteúdo: herdar;
justificar-conteúdo: inicial;
justificar-conteúdo: reverter;
justificar-conteúdo: reverter-camada;
justificar-conteúdo: desarmar;

Propriedade FolEs

Há duas nomenclaturas válidas para referenciar este modificador, sendo elas:

• justificar-conteúdo
• justificar-conteudo

Tradução para CSS

justificar-conteúdo é traduzido para justify-content.