Nel CSS Flexbox, perché non ci sono proprietà "justify-items" e "justify-self"?

Considera l'asse principale e l'asse trasversale di un contenitore flessibile:

                                                                                                                                                   _{Fonte: W3C}

Per allineare gli elementi flessibili lungo l'asse principale esiste una proprietà:

• justify-content

Per allineare gli elementi flessibili lungo l'asse trasversale ci sono tre proprietà:

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

Nell'immagine sopra, l'asse principale è orizzontale e l'asse trasversale è verticale. Queste sono le direzioni predefinite di un contenitore flessibile.

Tuttavia, queste direzioni possono essere facilmente scambiate con la flex-directionproprietà.

/* 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;

(L'asse trasversale è sempre perpendicolare all'asse principale.)

Il mio punto nel descrivere come il lavoro degli assi è che non sembra esserci nulla di speciale in nessuna delle due direzioni. Asse principale, asse trasversale, sono entrambi uguali in termini di importanza e flex-directionfacilita il passaggio avanti e indietro.

Quindi perché l'asse trasversale ottiene due proprietà di allineamento aggiuntive?

Perché sono align-contente align-itemsconsolidati in una proprietà per l'asse principale?

Perché l'asse principale non ottiene una justify-selfproprietà?

Scenari in cui queste proprietà sarebbero utili:

• posizionando un oggetto flessibile nell'angolo del contenitore flessibile
  #box3 { align-self: flex-end; justify-self: flex-end; }

• facendo allineare un gruppo di elementi flessibili a destra ( justify-content: flex-end) ma allineare il primo elemento a sinistra ( justify-self: flex-start)

  Considera una sezione di intestazione con un gruppo di elementi di navigazione e un logo. Con justify-selfil logo potrebbe essere allineato a sinistra mentre gli elementi di navigazione rimangono all'estrema destra e il tutto si regola senza problemi ("si flette") a dimensioni dello schermo diverse.

• in una fila di tre oggetti flessibili, applicare l'elemento centrale al centro del contenitore ( justify-content: center) e allineare gli oggetti adiacenti ai bordi del contenitore ( justify-self: flex-starte justify-self: flex-end).

  Si noti che i valori space-arounde space-betweensulla justify-contentproprietà non manterranno l'elemento centrale centrato sul contenitore se gli elementi adiacenti hanno larghezze diverse.

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

Versione jsFiddle

Al momento della stesura di questo documento, non è menzionato justify-selfné justify-itemsnelle specifiche del flexbox .

Tuttavia, nel CSS Box Alignment Module , che è la proposta incompiuta del W3C di stabilire un insieme comune di proprietà di allineamento da utilizzare su tutti i modelli di box, c'è questo:

                                                                                                                                                   _{Fonte: W3C}

Lo noterai justify-selfe verraijustify-items considerato ... ma non per Flexbox .

Finirò ripetendo la domanda principale:

Perché non ci sono proprietà "giustificare-elementi" e "giustificare-sé"?

Metodi per allineare gli articoli flessibili lungo l'asse principale

Come indicato nella domanda:

Per allineare gli elementi flessibili lungo l'asse principale esiste una proprietà: justify-content

Per elementi flessibili allineati lungo l'asse trasversale ci sono tre proprietà: align-content, align-itemsealign-self .

La domanda quindi pone:

Perché non ci sono justify-itemse justify-selfproprietà?

Una risposta potrebbe essere: perché non sono necessari.

Le specifiche del flexbox forniscono due metodi per allineare gli articoli flessibili lungo l'asse principale:

1. La justify-contentproprietà della parola chiave e
2. auto margini

justify-contenuti

La justify-contentproprietà allinea gli elementi flessibili lungo l'asse principale del contenitore flessibile.

Viene applicato al contenitore flessibile ma interessa solo gli articoli flessibili.

Esistono cinque opzioni di allineamento:

• flex-start ~ Gli articoli Flex vengono imballati all'inizio della riga.

  

• flex-end ~ Gli articoli Flex vengono imballati verso la fine della linea.

  

• center ~ Gli articoli flessibili sono imballati verso il centro della linea.

  

• space-between~ Gli oggetti flessibili sono distribuiti uniformemente, con il primo oggetto allineato a un bordo del contenitore e l'ultimo oggetto allineato al bordo opposto. I bordi utilizzati dai primi e ultimi dipende flex-directione modalità di scrittura ( ltro rtl).

  

• space-around~ Come per gli space-betweenspazi di mezzo formato su entrambe le estremità.

  

Margini automatici

Con i automargini , gli oggetti flessibili possono essere centrati, distanziati o raggruppati in sottogruppi.

Diversamente justify-content, che viene applicato al contenitore flessibile, i automargini vanno sugli oggetti flessibili.

Funzionano consumando tutto lo spazio libero nella direzione specificata.

Allinea il gruppo di elementi flessibili a destra, ma il primo elemento a sinistra

Scenario della domanda:

• facendo allineare un gruppo di elementi flessibili a destra ( justify-content: flex-end) ma allineare il primo elemento a sinistra ( justify-self: flex-start)

  Considera una sezione di intestazione con un gruppo di elementi di navigazione e un logo. Con justify-selfil logo potrebbe essere allineato a sinistra mentre gli elementi di navigazione rimangono all'estrema destra e il tutto si regola senza problemi ("si flette") a dimensioni dello schermo diverse.

Altri scenari utili:

Posiziona un oggetto flessibile nell'angolo

Scenario della domanda:

• posizionando un oggetto flessibile in un angolo .box { align-self: flex-end; justify-self: flex-end; }

Centra un oggetto flessibile in verticale e in orizzontale

margin: autoè un'alternativa a justify-content: centere align-items: center.

Invece di questo codice sul contenitore flessibile:

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

Puoi usarlo sull'elemento flessibile:

.box56 {
    margin: auto;
}

Questa alternativa è utile quando si centra un elemento flessibile che trabocca dal contenitore .

Centra un oggetto flessibile e centra un secondo oggetto flessibile tra il primo e il bordo

Un contenitore flessibile allinea gli oggetti flessibili distribuendo spazio libero.

Quindi, al fine di creare un equilibrio uguale , in modo che un elemento intermedio possa essere centrato nel contenitore con un singolo articolo a fianco, deve essere introdotto un contrappeso.

Negli esempi seguenti, vengono introdotti i terzi oggetti flex invisibili (riquadri 61 e 68) per bilanciare gli elementi "reali" (riquadri 63 e 66).

Naturalmente, questo metodo non è eccezionale in termini di semantica.

In alternativa, puoi usare uno pseudo-elemento invece di un vero elemento DOM. Oppure puoi usare il posizionamento assoluto. Tutti e tre i metodi sono trattati qui: oggetti flessibili al centro e allineati in basso

NOTA: gli esempi sopra funzionano solo in termini di centraggio vero - quando gli elementi più esterni sono uguali altezza / larghezza. Quando gli articoli flessibili hanno lunghezze diverse, vedere l'esempio seguente.

Centra un oggetto flessibile quando gli oggetti adiacenti hanno dimensioni variabili

Scenario della domanda:

• in una fila di tre oggetti flessibili, applicare l'elemento centrale al centro del contenitore ( justify-content: center) e allineare gli oggetti adiacenti ai bordi del contenitore ( justify-self: flex-starte justify-self: flex-end).

  Si noti che i valori space-arounde space-betweensulla justify-contentproprietà non manterranno centrato l'elemento centrale rispetto al contenitore se gli oggetti adiacenti hanno larghezze diverse ( vedere la demo ).

Come notato, a meno che tutti gli oggetti flessibili flex-directionnon abbiano la stessa larghezza o altezza (a seconda di ), l'elemento centrale non può essere veramente centrato. Questo problema è un valido esempio per una justify-selfproprietà (progettata per gestire l'attività, ovviamente).

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

Ecco due metodi per risolvere questo problema:

Soluzione n. 1: posizionamento assoluto

Le specifiche del flexbox consentono il posizionamento assoluto degli articoli flessibili . Ciò consente di centrare perfettamente l'elemento centrale indipendentemente dalle dimensioni dei suoi fratelli.

Tieni presente che, come tutti gli elementi posizionati in modo assoluto, gli elementi vengono rimossi dal flusso del documento . Ciò significa che non occupano spazio nel contenitore e possono sovrapporsi ai loro fratelli.

Negli esempi seguenti, l'elemento centrale è centrato con posizionamento assoluto e gli elementi esterni rimangono in-flow. Ma lo stesso layout può essere ottenuto al contrario: centrare l'elemento centrale con justify-content: centere posizionare assolutamente gli elementi esterni.

Soluzione n. 2: contenitori Flex nidificati (nessun posizionamento assoluto)

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

Ecco come funziona:

• Il div ( .container) di livello superiore è un contenitore flessibile.
• Ogni div ( .box) figlio ora è un oggetto flessibile.
• Ogni .boxarticolo viene fornito flex: 1per distribuire equamente lo spazio contenitore.
• Ora gli oggetti stanno consumando tutto lo spazio nella riga e hanno la stessa larghezza.
• Trasforma ogni oggetto in un contenitore flessibile (nidificato) e aggiungi justify-content: center.
• Ora ogni spanelemento è un oggetto flessibile centrato.
• Utilizzare i automargini di flessione per spostare l'esterno a spansinistra e a destra.

È inoltre possibile rinunciare justify-contente utilizzare autoesclusivamente i margini.

Ma justify-contentpuò funzionare qui perché i automargini hanno sempre la priorità. Dalle specifiche:

8.1. Allineando con i auto margini

Prima dell'allineamento tramite justify-contente align-self, qualsiasi spazio libero positivo viene distribuito ai margini automatici in quella dimensione.

justify-content: space-same (concept)

Tornando a justify-contentper un minuto, ecco un'idea per un'altra opzione.

• space-same~ Un ibrido di space-betweene space-around. Gli oggetti Flex sono equidistanti (come space-between), tranne che per gli spazi di mezza dimensione su entrambe le estremità (come space-around), ci sono spazi di dimensioni normali su entrambe le estremità.

Questo layout può essere realizzato con ::beforee ::afterpseudo-elementi sul contenitore flessibile.

^{(credito: @oriol per il codice e @crl per l'etichetta)}

AGGIORNAMENTO: i browser hanno iniziato l'implementazione space-evenly, il che realizza quanto sopra. Vedi questo post per i dettagli: uguale spazio tra gli oggetti flessibili

PLAYGROUND (include il codice per tutti gli esempi sopra)

So che questa non è una risposta, ma mi piacerebbe contribuire a questo argomento per quello che vale. Sarebbe bello se potessero rilasciare justify-selfper flexbox per renderlo davvero flessibile.

Sono convinto che quando ci sono più elementi sull'asse, il modo più logico per justify-selfcomportarsi è allinearsi ai vicini (o ai bordi) più vicini, come dimostrato di seguito.

Spero davvero che il W3C se ne accorga e lo considererà almeno. =)

In questo modo puoi avere un oggetto veramente centrato indipendentemente dalle dimensioni della casella sinistra e destra. Quando una delle scatole raggiunge il punto della casella centrale, la spingerà semplicemente fino a quando non c'è più spazio da distribuire.

La facilità di creare layout fantastici è infinita, dai un'occhiata a questo esempio "complesso".

Questo è stato chiesto nell'elenco in stile www e Tab Atkins (editor di specifiche) ha fornito una risposta che spiega il perché . Lo approfondirò un po 'qui.

Per iniziare, supponiamo inizialmente che il nostro contenitore flessibile sia a linea singola ( flex-wrap: nowrap). In questo caso, c'è chiaramente una differenza di allineamento tra l'asse principale e l'asse trasversale - ci sono più oggetti impilati nell'asse principale, ma solo un oggetto impilato nell'asse trasversale. Quindi ha senso avere un "align-self" personalizzabile per elemento nell'asse trasversale (poiché ogni elemento è allineato separatamente, da solo), mentre non ha senso nell'asse principale (poiché lì, il gli articoli sono allineati collettivamente).

Per il flexbox multilinea, la stessa logica si applica a ogni "flex line". In una data linea, gli elementi sono allineati individualmente nell'asse trasversale (poiché esiste un solo elemento per linea, nell'asse trasversale), rispetto collettivamente nell'asse principale.

Ecco un altro modo di formularlo: quindi, tutte le proprietà *-selfe *-contentriguardano come distribuire spazio extra attorno alle cose. Ma la differenza chiave è che le *-selfversioni sono per i casi in cui c'è solo una cosa in quell'asse , e le *-contentversioni sono per quando ci sono potenzialmente molte cose in quell'asse . Gli scenari una cosa contro molte cose sono diversi tipi di problemi e quindi hanno diversi tipi di opzioni disponibili - ad esempio, i valori space-around/ space-betweenhanno senso per *-content, ma non per *-self.

SO: Nell'asse principale di un flexbox, ci sono molte cose su cui distribuire lo spazio. Quindi una *-contentproprietà ha un senso lì, ma non una *-selfproprietà.

Al contrario, nell'asse trasversale, abbiamo sia una *-selfche una *-contentproprietà. Uno determina come distribuiremo lo spazio attorno alle molte linee flessibili ( align-content), mentre l'altro ( align-self) determina come distribuire lo spazio attorno a singoli elementi flessibili nell'asse trasversale, all'interno di una determinata linea flessibile.

(Sto ignorando le *-itemsproprietà qui, dal momento che stabiliscono semplicemente le impostazioni predefinite per *-self.)

So che questo non usa flexbox, ma per il semplice caso d'uso di tre elementi (uno a sinistra, uno al centro, uno a destra), questo può essere realizzato facilmente usando display: gridsul genitore, grid-area: 1/1/1/1;sui bambini e justify-selfper il posizionamento di quei bambini.

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

Ho appena trovato la mia soluzione a questo problema, o almeno il mio problema.
Stavo usando al justify-content: space-aroundposto di justify-content: space-between;.

In questo modo gli elementi finali rimarranno in alto e in basso e, se lo si desidera, si potrebbero avere margini personalizzati.