css - example - justify self not work




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

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

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

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 proprietà 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;

(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. L'asse principale, l'asse trasversale, sono entrambi uguali in termini di importanza e la flex-direction facilita il passaggio avanti e indietro.

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

Perché align-content e align-items consolidati in una proprietà per l'asse principale?

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

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

  • fare in modo che un gruppo di elementi flessibili sia allineato a destra ( justify-content: flex-end ) ma che il primo elemento sia allineato a sinistra (elemento justify-self: flex-start )

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

  • in una riga 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-start e justify-self: flex-end ).

    Si noti che i valori space-around e space-between nella proprietà justify-content non manterranno l'elemento centrale centrato rispetto al contenitore se gli oggetti 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 middle box will only be truly centered if adjacent boxes are equal width</p>

Versione jsFiddle

Al momento della stesura di questo documento, non vi è alcuna menzione di justify-self o justify-items nelle 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

Noterai che gli justify-items e justify-items vengono presi in considerazione ... 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 allineare gli oggetti flessibili lungo l'asse trasversale ci sono tre proprietà: align-content , align-items .

La domanda quindi pone:

Perché non ci sono justify-items justify-self proprietà justify-self ?

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 proprietà della parola chiave justify-content e
  2. margini auto

justify-contenuti

La proprietà di justify-content 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 verso l'inizio della linea.

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

  • center ~ Gli oggetti Flex sono imballati verso il centro della linea.

  • space-between oggetti ~ Flex è distribuito uniformemente, con il primo oggetto allineato a un bordo del contenitore e l'ultimo oggetto allineato al bordo opposto. I bordi utilizzati dal primo e dall'ultimo elemento dipendono dalla flex-direction e dalla modalità di scrittura ( ltr o rtl ).

  • space-around ~ Come lo space-between tranne con spazi di mezza dimensione su entrambe le estremità.

Margini automatici

Con auto margini auto , gli articoli flessibili possono essere centrati, distanziati o raggruppati in sottogruppi.

A differenza justify-content , che viene applicato al contenitore flessibile, auto margini auto vanno sugli articoli 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:

  • fare in modo che un gruppo di elementi flessibili sia allineato a destra ( justify-content: flex-end ) ma che il primo elemento sia allineato a sinistra (elemento justify-self: flex-start )

    Considera una sezione di intestazione con un gruppo di elementi di navigazione e un logo. Con justify-self il logo potrebbe essere allineato a sinistra mentre gli oggetti 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:

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

Centra un oggetto flessibile in verticale e in orizzontale

margin: auto è un'alternativa per justify-content: center e 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, sono 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 vero centraggio - quando gli elementi più esterni hanno uguale altezza / larghezza. Quando gli articoli flessibili hanno lunghezze diverse, vedere l'esempio seguente.

Centrare un oggetto flessibile quando gli oggetti adiacenti hanno dimensioni variabili

Scenario della domanda:

  • in una riga 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-start e justify-self: flex-end ).

    Si noti che i valori space-around e space-between nella proprietà justify-content non manterranno l'elemento centrale centrato rispetto al contenitore se gli oggetti adiacenti hanno larghezze diverse ( vedere la demo ).

Come notato, a meno che tutti gli oggetti flessibili non abbiano la stessa larghezza o altezza (a seconda flex-direction ), l'elemento centrale non può essere realmente centrato. Questo problema è un valido esempio per una proprietà justify-self (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 justify-content: center l'elemento centrale con justify-content: center e 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 di livello superiore ( .container ) è un contenitore flessibile.
  • Ogni div figlio ( .box ) ora è un oggetto flessibile.
  • A ogni articolo .box viene assegnato il valore flex: 1 per 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 elemento di span è un oggetto flessibile centrato.
  • Utilizzare auto margini auto flessione per spostare la span esterna span sinistra e a destra.

Potresti anche rinunciare justify-content e utilizzare esclusivamente i margini auto .

Ma il justify-content può funzionare qui perché auto margini auto hanno sempre la priorità. Dalle specifiche:

8.1. Allineamento con auto margini auto

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

justify-content: space-same (concept)

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

  • space-same ~ Un ibrido di space-between e space-around . Gli oggetti flessibili sono distribuiti uniformemente (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 pseudo-elementi ::before e ::after sul contenitore flessibile.

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

AGGIORNAMENTO: i browser hanno iniziato a implementare lo space-evenly , il che compie quanto sopra. Vedi questo post per i dettagli: uguale spazio tra gli oggetti flessibili

PLAYGROUND (include il codice per tutti gli esempi sopra)


C'è justify-self , ma in Chrome Canary, non nella versione stabile di Chrome. Ci sono persino justify-items :

Ma per quanto ne so, neanche quelle proprietà funzionano. Quindi probabilmente Google l'ha salvato in anticipo per future versioni CSS. Spero solo che presto aggiungano le proprietà.


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

Sono convinto che quando ci sono più elementi sull'asse, il modo più logico per justify-self è quello di 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 caselle 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".


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: grid sul genitore, grid-area: 1/1/1/1; sui bambini e justify-self per 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>







w3c