No CSS Flexbox, por que não existem propriedades "justify-items" e "justify-self"?

Considere o eixo principal e o eixo transversal de um contêiner flexível:

                                                                                                                                                   _{Fonte: W3C}

Para alinhar itens flexíveis ao longo do eixo principal, existe uma propriedade:

• justify-content

Para alinhar itens flexíveis ao longo do eixo transversal, existem três propriedades:

• align-content
• align-items
• align-self

Na imagem acima, o eixo principal é horizontal e o eixo transversal é vertical. Essas são as direções padrão de um contêiner flexível.

No entanto, essas instruções podem ser facilmente trocadas com a flex-directionpropriedade.

/* main axis is horizontal, cross axis is vertical */
flex-direction: row;
flex-direction: row-reverse;

/* main axis is vertical, cross axis is horizontal */    
flex-direction: column;
flex-direction: column-reverse;

(O eixo transversal é sempre perpendicular ao eixo principal.)

Meu argumento ao descrever como os eixos funcionam é que não parece haver nada de especial em nenhuma das direções. Eixo principal, eixo transversal, ambos são iguais em termos de importância e flex-directionfacilitam a alternância.

Então, por que o eixo transversal obtém duas propriedades de alinhamento adicionais?

Por que align-contente são align-itemsconsolidados em uma propriedade para o eixo principal?

Por que o eixo principal não obtém uma justify-selfpropriedade?

Cenários em que essas propriedades seriam úteis:

• colocando um item flexível no canto do contêiner flexível
  #box3 { align-self: flex-end; justify-self: flex-end; }

• alinhando um grupo de itens flexíveis à direita ( justify-content: flex-end), mas com o primeiro item alinhado à esquerda ( justify-self: flex-start)

  Considere uma seção de cabeçalho com um grupo de itens de navegação e um logotipo. Com justify-selfo logotipo pode ser alinhado à esquerda, enquanto os itens de navegação ficam à direita, e tudo se ajusta suavemente ("flexiona") para diferentes tamanhos de tela.

• em uma linha de três itens flexíveis, afixe ​​o item do meio ao centro do contêiner ( justify-content: center) e alinhe os itens adjacentes às bordas do contêiner ( justify-self: flex-starte justify-self: flex-end).

  Observe que os valores space-arounde space-betweena justify-contentpropriedade não manterão o item do meio centralizado sobre o contêiner se os itens adjacentes tiverem larguras diferentes.

#container {
  display: flex;
  justify-content: space-between;
  background-color: lightyellow;
}
.box {
  height: 50px;
  width: 75px;
  background-color: springgreen;
}
.box1 {
  width: 100px;
}
.box3 {
  width: 200px;
}
#center {
  text-align: center;
  margin-bottom: 5px;
}
#center > span {
  background-color: aqua;
  padding: 2px;
}

<div id="center">
  <span>TRUE CENTER</span>
</div>

<div id="container">
  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="box box3"></div>
</div>

<p>note that the middlebox will only be truly centered if adjacent boxes are equal width</p>

Versão jsFiddle

No momento da redação deste documento, não há menção justify-selfou justify-itemsna especificação do flexbox .

No entanto, no Módulo de alinhamento de caixas CSS , que é a proposta inacabada do W3C de estabelecer um conjunto comum de propriedades de alinhamento para uso em todos os modelos de caixas, existe o seguinte:

                                                                                                                                                   _{Fonte: W3C}

Você notará isso justify-selfe justify-itemsestá sendo considerado ... mas não para o flexbox .

Terminarei reiterando a questão principal:

Por que não existem propriedades "justify-items" e "justify-self"?

Métodos para alinhar itens flexíveis ao longo do eixo principal

Como afirmado na pergunta:

Para alinhar itens flexíveis ao longo do eixo principal, existe uma propriedade: justify-content

Para artigos de flex de alinhamento ao longo do eixo transversal, existem três propriedades: align-content, align-itemsealign-self .

A pergunta então pergunta:

Por que não existem justify-itemse justify-selfpropriedades?

Uma resposta pode ser: porque eles não são necessários.

A especificação flexbox fornece dois métodos para alinhar itens flexíveis ao longo do eixo principal:

1. A justify-contentpropriedade da palavra-chave e
2. auto margens

justificar conteúdo

o justify-content propriedade alinha itens flexíveis ao longo do eixo principal do contêiner flexível.

É aplicado ao contêiner flexível, mas afeta apenas itens flexíveis.

Existem cinco opções de alinhamento:

• flex-start ~ Os itens flexíveis são compactados no início da linha.

  

• flex-end ~ Os itens flexíveis são compactados no final da linha.

  

• center ~ Os itens flexíveis são compactados em direção ao centro da linha.

  

• space-between~ Os itens flexíveis são espaçados igualmente, com o primeiro item alinhado a uma borda do contêiner e o último item alinhado à borda oposta. As bordas usadas pelos primeiros e últimos itens depende flex-directione modo de escrita ( ltrou rtl).

  

• space-around~ O mesmo que space-betweencom espaços de meio tamanho nas duas extremidades.

  

Margens automáticas

Com automargens , os itens flexíveis podem ser centralizados, espaçados ou agrupados em subgrupos.

Diferentemente justify-content, aplicado ao contêiner flexível, as automargens continuam nos itens flexíveis.

Eles trabalham consumindo todo o espaço livre na direção especificada.

Alinhar o grupo de itens flexíveis à direita, mas o primeiro item à esquerda

Cenário da pergunta:

• alinhando um grupo de itens flexíveis à direita ( justify-content: flex-end), mas com o primeiro item alinhado à esquerda (justify-self: flex-start )

  Considere uma seção de cabeçalho com um grupo de itens de navegação e um logotipo. Com justify-selfo logotipo pode ser alinhado à esquerda, enquanto os itens de navegação ficam à direita, e tudo se ajusta suavemente ("flexiona") para diferentes tamanhos de tela.

Outros cenários úteis:

Coloque um item flexível no canto

Cenário da pergunta:

• colocando um item flexível em um canto .box { align-self: flex-end; justify-self: flex-end; }

Centralize um item flexível na vertical e na horizontal

margin: autoé uma alternativa para justify-content: centere align-items: center.

Em vez deste código no contêiner flex:

.container {
    justify-content: center;
    align-items: center;
}

Você pode usar isso no item flexível:

.box56 {
    margin: auto;
}

Essa alternativa é útil ao centralizar um item flexível que transborda o contêiner .

Centralize um item flexível e centralize um segundo item flexível entre o primeiro e a borda

Um contêiner flexível alinha itens flexíveis distribuindo espaço livre.

Portanto, para criar equilíbrio igual , para que um item do meio possa ser centralizado no contêiner com um único item ao lado, um contrapeso deve ser introduzido.

Nos exemplos abaixo, os terceiros itens flexíveis invisíveis (casas 61 e 68) são introduzidos para equilibrar os itens "reais" (casas 63 e 66).

Obviamente, esse método não é ótimo em termos de semântica.

Como alternativa, você pode usar um pseudoelemento em vez de um elemento DOM real. Ou você pode usar o posicionamento absoluto. Todos os três métodos são abordados aqui: Itens flexíveis de alinhamento central e inferior

NOTA: Os exemplos acima funcionarão apenas - em termos de verdadeira centralização - quando os itens mais externos tiverem altura / largura iguais. Quando os itens flexíveis tiverem comprimentos diferentes, consulte o próximo exemplo.

Centralizar um item flexível quando itens adjacentes variarem de tamanho

Cenário da pergunta:

• em uma linha de três itens flexíveis, afixe ​​o item do meio ao centro do contêiner ( justify-content: center) e alinhe os itens adjacentes às bordas do contêiner ( justify-self: flex-starte justify-self: flex-end).

  Observe que os valores space-arounde space-betweena justify-contentpropriedade não manterão o item do meio centralizado em relação ao contêiner se os itens adjacentes tiverem larguras diferentes ( consulte a demonstração ).

Conforme observado, a menos que todos os itens flexíveis tenham largura ou altura iguais (dependendo flex-direction), o item do meio não poderá ser verdadeiramente centralizado. Esse problema justifica uma justify-selfpropriedade (projetada para lidar com a tarefa, é claro).

#container {
  display: flex;
  justify-content: space-between;
  background-color: lightyellow;
}
.box {
  height: 50px;
  width: 75px;
  background-color: springgreen;
}
.box1 {
  width: 100px;
}
.box3 {
  width: 200px;
}
#center {
  text-align: center;
  margin-bottom: 5px;
}
#center > span {
  background-color: aqua;
  padding: 2px;
}

<div id="center">
  <span>TRUE CENTER</span>
</div>

<div id="container">
  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="box box3"></div>
</div>

<p>The middle box will be truly centered only if adjacent boxes are equal width.</p>

Aqui estão dois métodos para resolver esse problema:

Solução 1: posicionamento absoluto

A especificação flexbox permite o posicionamento absoluto de itens flex . Isso permite que o item do meio seja perfeitamente centralizado, independentemente do tamanho de seus irmãos.

Lembre-se de que, como todos os elementos absolutamente posicionados, os itens são removidos do fluxo de documentos . Isso significa que eles não ocupam espaço no contêiner e podem se sobrepor aos irmãos.

Nos exemplos abaixo, o item do meio é centralizado com posicionamento absoluto e os itens externos permanecem em fluxo. Mas o mesmo layout pode ser obtido de maneira inversa: centralize o item do meio justify-content: centere posicione absolutamente os itens externos.

Solução 2: recipientes flexíveis aninhados (sem posicionamento absoluto)

.container {
  display: flex;
}
.box {
  flex: 1;
  display: flex;
  justify-content: center;
}
.box71 > span { margin-right: auto; }
.box73 > span { margin-left: auto;  }

/* non-essential */
.box {
  align-items: center;
  border: 1px solid #ccc;
  background-color: lightgreen;
  height: 40px;
}

<div class="container">
  <div class="box box71"><span>71 short</span></div>
  <div class="box box72"><span>72 centered</span></div>
  <div class="box box73"><span>73 loooooooooooooooong</span></div>
</div>

Veja como funciona:

• A div de nível superior (.container ) de é um contêiner flexível.
• Cada div ( .box) filho agora é um item flexível.
• Cada .boxitem é fornecido flex: 1para distribuir o espaço do contêiner igualmente.
• Agora os itens estão consumindo todo o espaço da linha e têm a mesma largura.
• Faça de cada item um contêiner flexível (aninhado) e adicione justify-content: center .
• Agora cada span elemento é um item flexível centralizado.
• Use automargens flexíveis para deslocar os botões externos para spana esquerda e direita.

Você também pode renunciar justify-contente usarauto margens exclusivamente.

Mas justify-contentpode funcionar aqui porque as automargens sempre têm prioridade. Das especificações:

8.1 Alinhando com auto margens

Antes do alinhamento via justify-contente align-self, qualquer espaço livre positivo é distribuído para as margens automáticas nessa dimensão.

justify-content: space-same (conceito)

Voltando a justify-contentum minuto, aqui está uma idéia para mais uma opção.

• space-same~ Um híbrido de space-betweene space-around. Os itens flexíveis são espaçados uniformemente (como space-between), exceto que, em vez de espaços de meio tamanho nas duas extremidades (como space-around), há espaços em tamanho total nas duas extremidades.

Esse layout pode ser alcançado com ::beforee ::afterpseudoelementos no contêiner flex.

^{(crédito: @oriol para o código e @crl para o rótulo)}

ATUALIZAÇÃO: Os navegadores começaram a implementar space-evenly, o que faz o acima. Consulte esta publicação para obter detalhes: Espaço igual entre itens flexíveis

PLAYGROUND (inclui código para todos os exemplos acima)

Sei que isso não é uma resposta, mas gostaria de contribuir com esse assunto para o que vale a pena. Seria ótimo se eles pudessem liberar o justify-selfflexbox para torná-lo realmente flexível.

É minha convicção que, quando houver vários itens no eixo, a maneira mais lógica de justify-selfse comportar é alinhar-se aos vizinhos (ou arestas) mais próximos, conforme demonstrado abaixo.

Eu realmente espero que o W3C tome conhecimento disso e pelo menos o considere. =)

Dessa forma, você pode ter um item realmente centralizado, independentemente do tamanho da caixa esquerda e direita. Quando uma das caixas atinge o ponto da caixa central, simplesmente a empurra até que não haja mais espaço para distribuir.

A facilidade de criar layouts impressionantes é interminável, dê uma olhada neste exemplo "complexo".

Isso foi solicitado na lista de estilos www, e Tab Atkins (editor de especificações) forneceu uma resposta explicando o porquê . Vou elaborar um pouco aqui.

Para começar, vamos assumir inicialmente que nosso contêiner flex é uma linha ( flex-wrap: nowrap). Nesse caso, há claramente uma diferença de alinhamento entre o eixo principal e o eixo transversal - há vários itens empilhados no eixo principal, mas apenas um item empilhado no eixo transversal. Portanto, faz sentido ter um "auto-alinhamento" personalizável por item no eixo cruzado (já que cada item é alinhado separadamente, por si só), enquanto não faz sentido no eixo principal (pois lá, o itens são alinhados coletivamente).

Para caixa flexível de várias linhas, a mesma lógica se aplica a cada "linha flexível". Em uma determinada linha, os itens são alinhados individualmente no eixo transversal (já que há apenas um item por linha, no eixo transversal), versus coletivamente no eixo principal.

Aqui está outra maneira de expressar isso: então, todas as propriedades *-selfe *-contentsão sobre como distribuir espaço extra em torno das coisas. Mas a principal diferença é que as *-selfversões são para casos em que há apenas uma coisa nesse eixo , e as *-contentversões são para quando há potencialmente muitas coisas nesse eixo . Os cenários de uma coisa versus muitas coisas são tipos diferentes de problemas e, portanto, eles têm tipos diferentes de opções disponíveis - por exemplo, os valores space-around/ space-betweenfazem sentido para *-content, mas não para *-self.

SO: No eixo principal de uma caixa flexível, há muitas coisas para distribuir espaço. Portanto, uma *-contentpropriedade faz sentido lá, mas não uma *-selfpropriedade.

Por outro lado, no eixo transversal, temos *-selfuma *-contentpropriedade e uma . Um determina como distribuiremos o espaço em torno das muitas linhas flexíveis ( align-content), enquanto o outro ( align-self) determina como distribuir o espaço em torno dos itens individuais flexíveis no eixo transversal, dentro de uma determinada linha flexível.

(Estou ignorando *-itemspropriedades aqui, pois elas simplesmente estabelecem padrões para *-self.)

Sei que isso não usa o flexbox, mas, para o simples caso de uso de três itens (um à esquerda, um no centro e outro à direita), isso pode ser feito facilmente usando display: grido pai, grid-area: 1/1/1/1;os filhos e o justify-selfposicionamento dessas crianças.

<div style="border: 1px solid red; display: grid; width: 100px; height: 25px;">
  <div style="border: 1px solid blue; width: 25px; grid-area: 1/1/1/1; justify-self: left;"></div>
  <div style="border: 1px solid blue; width: 25px; grid-area: 1/1/1/1; justify-self: center;"></div>
  <div style="border: 1px solid blue; width: 25px; grid-area: 1/1/1/1; justify-self: right;"></div>
</div>

Acabei de encontrar minha própria solução para esse problema, ou pelo menos meu problema.
Eu estava usando em justify-content: space-aroundvez de justify-content: space-between;.

Dessa forma, os elementos finais permanecerão na parte superior e inferior e você poderá ter margens personalizadas, se desejar.