No CSS Flexbox, por que não existem propriedades “justificar itens” e “justificar-se”?

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

insira a descrição da imagem aqui Fonte: W3C

Para alinhar itens flexíveis ao longo do eixo principal, há 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. Estas são as direções padrão de um contêiner flexível.

No entanto, essas direções podem ser facilmente intercambiadas com a propriedade flex-direction .

 /* 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 ponto em descrever como o trabalho dos eixos é que não parece haver nada de especial em nenhuma direção. O eixo principal, o eixo cruzado, ambos são iguais em termos de importância e flex-direction facilita a mudança para frente e para trás.

Então, por que o eixo cruzado tem duas propriedades adicionais de alinhamento?

Por que o align-content align-items consolidados em uma propriedade para o eixo principal?

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


Cenários onde 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; }

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

    Considere uma seção de header com um grupo de itens de navegação e um logotipo. Com a justify-self o logotipo pode ser alinhado à esquerda, enquanto os itens de navegação ficam bem à direita, e tudo se ajusta suavemente (“flexiona”) a diferentes tamanhos de canvas.

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

    Observe que os valores de space-around e space-between a propriedade justify-content não manterão o item do meio centralizado em relação ao 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; } 
 
TRUE CENTER

note that the middle box will only be truly centered if adjacent boxes are equal width

jsFiddle version


Como desta escrita, não há menção de justify-self ou justify-items na especificação do flexbox .

No entanto, no CSS Box Alignment Module , que é a proposta inacabada do W3C para estabelecer um conjunto comum de propriedades de alinhamento para uso em todos os modelos de checkbox, existe o seguinte:

insira a descrição da imagem aqui Fonte: W3C

Você notará que os justify-items justify-self e justify-items estão sendo considerados … mas não para o flexbox .


Vou terminar reiterando a questão principal:

Por que não há propriedades “justificar-itens” e “justificar-se”?

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, há uma propriedade: justify-content

Para alinhar itens flexíveis ao longo do eixo cruzado, há três propriedades: align-content , align-items e align-self .

A pergunta então pergunta:

Por que não há justify-items justify-self propriedades justify-self ?

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

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

  1. A propriedade de palavra justify-content chave justify-content e
  2. margens auto

justificar-conteúdo

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

Ele é aplicado ao contêiner de flexão, mas afeta apenas os itens flexíveis.

Existem cinco opções de alinhamento:

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

    insira a descrição da imagem aqui

  • flex-end ~ Os itens Flex são colocados no final da linha.

    insira a descrição da imagem aqui

  • center ~ Os itens Flex são colocados no centro da linha.

    insira a descrição da imagem aqui

  • space-between itens Flex são uniformemente espaçados, com o primeiro item alinhado a uma borda do contêiner eo último item alinhado à borda oposta. As bordas usadas pelo primeiro e último item dependem do modo flex-direction e writing ( ltr ou rtl ).

    insira a descrição da imagem aqui

  • space-around ~ O mesmo que o space-between exceto com espaços de meio tamanho nas duas extremidades.

    insira a descrição da imagem aqui


Margens Automáticas

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

Ao contrário do justify-content , que é aplicado ao contêiner flexível, auto margens auto são 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:

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

    Considere uma seção de header com um grupo de itens de navegação e um logotipo. Com a justify-self o logotipo pode ser alinhado à esquerda, enquanto os itens de navegação ficam bem à direita, e tudo se ajusta suavemente (“flexiona”) a diferentes tamanhos de canvas.

insira a descrição da imagem aqui

insira a descrição da imagem aqui


Outros cenários úteis:

insira a descrição da imagem aqui

insira a descrição da imagem aqui

insira a descrição da imagem aqui


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; } .box { align-self: flex-end; justify-self: flex-end; }

insira a descrição da imagem aqui


Centralize um item flexível na vertical e na horizontal

insira a descrição da imagem aqui

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

Em vez desse código no contêiner flexível:

 .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 .


Centralizar um item flexível e centralizar um segundo item flexível entre o primeiro e o limite

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

Assim, a fim de criar equilíbrio igual , de modo que um item do meio possa ser centrado no contêiner com um único item ao lado, um contrapeso deve ser introduzido.

Nos exemplos abaixo, itens invisíveis do terceiro flex (checkboxs 61 e 68) são introduzidos para equilibrar os itens “reais” (checkbox 63 e 66).

insira a descrição da imagem aqui

insira a descrição da imagem aqui

Claro, esse método não é nada bom 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 methods são abordados aqui: Itens flexíveis de alinhamento central e inferior

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


Centralizar um item flexível quando itens adjacentes variam em tamanho

Cenário da pergunta:

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

    Observe que os valores de space-around e de space-between a propriedade justify-content 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 ).

Como observado, a menos que todos os itens flexíveis sejam de largura ou altura iguais (dependendo flex-direction ), o item do meio não pode ser verdadeiramente centrado. Esse problema é um forte argumento para uma propriedade justify-self (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; } 
 
TRUE CENTER

The middle box will be truly centered only if adjacent boxes are equal width.

Eu sei que isso não é uma resposta, mas gostaria de contribuir para esse assunto pelo que vale a pena. Seria ótimo se eles pudessem liberar justify-self para flexbox para torná-lo verdadeiramente flexível.

Acredito que, quando há vários itens no eixo, a maneira mais lógica de justify-self a se comportar é se alinhar com seus vizinhos mais próximos (ou borda), conforme demonstrado abaixo.

Eu realmente espero que o W3C perceba isso e pelo menos considere isso. =)

insira a descrição da imagem aqui

Dessa forma, você pode ter um item realmente centrado, independentemente do tamanho da checkbox esquerda e direita. Quando uma das checkboxs atinge o ponto da checkbox central, basta empurrá-la até que não haja mais espaço para distribuir.

insira a descrição da imagem aqui

A facilidade de criar layouts impressionantes é infinita, dê uma olhada neste exemplo “complexo”.

insira a descrição da imagem aqui

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

Para começar, vamos supor inicialmente que nosso contêiner flexível seja de linha única ( flex-wrap: nowrap ). Nesse caso, há claramente uma diferença de alinhamento entre o eixo principal e o eixo cruzado – há vários itens empilhados no eixo principal, mas apenas um item empilhado no eixo transversal. Então, faz sentido ter um customizable-per-item “auto-alinhamento” no eixo cruzado (uma vez que cada item é alinhado separadamente, por conta própria), enquanto que não faz sentido no eixo principal (uma vez que, o itens são alinhados coletivamente).

Para flexbox multi-line, a mesma lógica se aplica a cada “flex line”. Em uma determinada linha, os itens são alinhados individualmente no eixo transversal (já que há apenas um item por linha, no eixo transversal), vs. coletivamente no eixo principal.


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

SO: No eixo principal de um flexbox, há muitas coisas para distribuir o espaço. Portanto, uma propriedade *-content faz sentido lá, mas não uma propriedade *-self .

Em contraste, no eixo cruzado, temos ambas as propriedades *-self e *-content . Um determina como distribuiremos espaço em torno das várias linhas flexíveis ( align-content ), enquanto o outro ( align-self ) determina como distribuir o espaço em torno de itens flexíveis individuais no eixo transversal, dentro de uma determinada linha flexível.

(Estou ignorando *-items propriedades *-items aqui, já que elas simplesmente estabelecem padrões para *-self .)

justify-self , mas no Chrome Canary, não na versão estável do Chrome. Há até justify-items :

insira a descrição da imagem aqui

Mas, tanto quanto eu posso dizer essas propriedades não funcionam também. Então, provavelmente, o Google salvou de antemão para futuras versões CSS. Só espero que eles adicionem as propriedades em breve.

justify-items .

Eu acho que é um novo recurso. A compatibilidade do navegador é um pouco deficiente.