Una guida completa all'allineamento di Flexbox

L'allineamento è probabilmente l'aspetto più confuso di Flexbox. Il modulo di layout flexbox ha una manciata di proprietà di allineamento che si comportano in modo diverso in circostanze diverse e, quando li si utilizza, potrebbe non necessariamente capire cosa sta succedendo o perché. Tuttavia, se sai a cosa prestare attenzione, l'allineamento è meno complicato di quanto non appaia prima. Questo tutorial ti aiuterà a capire perfettamente l'allineamento della flexbox.

Una storia di due assi

Quando si usa la flexbox lavoriamo con due assi: il principale e attraversare assi. Come suggeriscono i loro nomi, questi assi formano una relazione gerarchica, essendo l'asse principale superiore all'asse trasversale. 

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

Questa relazione gerarchica costituisce la principale differenza tra Flexbox e CSS Grid Layout. In base alla progettazione, la griglia CSS ha due assi non gerarchici: gli assi riga e colonna. Questo perché i creatori di standard web intendevano utilizzare la griglia CSS come modello di layout bidimensionale. Flexbox, d'altra parte, ha un asse primario e uno secondario, poiché il suo scopo è quello di essere un modello di layout monodimensionale. La parte interessante di Flexbox è che puoi definire la direzione di quella dimensione impostando la posizione dell'asse principale, quindi puoi creare sia layout basati su righe che basati su colonne.

Per evitare di essere confusi dalle proprietà di allineamento, tenere sempre presente che quando si utilizza la flexbox, si sta lavorando con un modello monodimensionale. Anche se il tuo layout sembra avere due dimensioni (cioè righe e colonne), gli elementi flessibili possono fluire solo in una direzione, lungo l'asse principale. È possibile giustificare gli elementi flessibili in quella direzione e allineare la spaziatura tra i singoli elementi lungo l'asse trasversale.

Inizia definendo l'asse principale

La direzione dell'asse principale è determinata dalla proprietà flex-direction: ci sono quattro possibili valori:

1. direzione della flessione: riga; - l'asse principale va da sinistra a destra (questo è l'impostazione predefinita)
   
2. direzione della flessione: row-reverse; - l'asse principale corre da destra a sinistra
3. direzione della flessione: colonna; - l'asse principale corre dall'alto verso il basso
4. flex-direction: column-reverse; - l'asse principale corre dal basso verso l'alto

Vediamo come appare nel browser. Userò un markup HTML molto semplice, solo nove caselle impilate l'una sull'altra:

 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
8
 
9
 
 

Il div esterno con il .contenitore la classe sarà il contenitore flessibile e il div interno con il .articolo la classe saranno gli oggetti flessibili.

1. Da sinistra a destra: riga

Come accennato, la direzione flex predefinita è riga; se non si imposta nient'altro, questo sarà il valore utilizzato. Come puoi vedere di seguito, ho aggiunto solo le proprietà relative alla flexbox al contenitore flessibile. Gli oggetti Flex hanno ricevuto alcune proprietà per scopi decorativi:

.container display: flex; flex-wrap: wrap; direzione della flessione: riga; 

quando flex-direzione è riga, l'asse principale corre orizzontalmente, da sinistra a destra. Questa è quindi la direzione lungo la quale sono disposti gli elementi flessibili. L'asse trasversale corre perpendicolarmente, dall'alto verso il basso, e quando gli elementi si avvolgono fanno così in questa direzione.

2. Da destra a sinistra: riga-indietro

Quando la direzione della flessione è data il valore fila-reverse, la posizione degli assi rimane la stessa, il che significa che l'asse principale funzionerà ancora orizzontalmente e l'asse trasversale verticalmente. Tuttavia, la riga direzione sarà invertito: da destra a sinistra lungo l'asse principale. 

.container display: flex; flex-wrap: wrap; direzione della flessione: row-reverse; 

Se osservi la numerazione degli elementi flessibili, puoi vedere che ora ogni riga è numerata da destra a sinistra, ma gli elementi sono ancora avvolti verticalmente verso il basso.

Se vuoi anche invertire la direzione dell'asse trasversale che devi usare wrap-inversa sul flex-wrap proprietà. Trova la differenza:

3. Dall'alto in basso: colonna

Quando il flex-direzione è impostato per colonna, l'asse principale e quello incrociato cambiano le loro posizioni. L'asse principale verrà eseguito verticalmente (dall'alto verso il basso) e l'asse trasversale verrà eseguito orizzontalmente (da sinistra a destra).

.container display: flex; flex-wrap: wrap; direzione della flessione: colonna; altezza massima: 35rem; / * in modo che gli elementi si chiudano * /

Ora vedrai che la numerazione degli elementi flessibili non segue le righe, ma le colonne. È qui che la natura unidimensionale della flexbox è probabilmente la più visibile. Gli oggetti si avvolgeranno solo se il contenitore ha un'altezza fissa.

4. Dal basso verso l'alto: colonna inversa

Mi aspetto che tu stia vedendo uno schema in via di sviluppo qui. quando flex-direzione è impostato per Colonna-reverse, l'asse principale è ancora verticale e l'asse trasversale è ancora orizzontale, proprio come abbiamo visto nell'esempio precedente. Tuttavia, la direzione della colonna è invertita in modo che l'asse principale punti dal basso verso l'alto. 

.container display: flex; flex-wrap: wrap; flex-direction: column-reverse; altezza massima: 35rem; / * in modo che gli elementi si chiudano * /

Come puoi vedere di seguito, la numerazione degli elementi flessibili inizia in basso a sinistra, spostandosi verso l'alto e verso destra.

Ancora una volta, per cambiare la direzione dell'asse trasversale, è necessario utilizzare wrap-inversa sul flex-wrap proprietà.

Scorciatoia Flex-flow

Il flex-flow la proprietà è una scorciatoia per flex-direzione e flex-wrap. Ad esempio, puoi usare:

flex-flow: colonna wrap;

invece di:

direzione della flessione: colonna; flex-wrap: wrap;

Flexbox Alignment Properties

L'allineamento del Flexbox può avvenire sia lungo l'asse principale che su quello incrociato.

Una delle proprietà (justify-contenuti) appartiene all'asse principale, mentre gli altri tre (allineare-articoli, allineare-self, allineare-contenuti) appartengono all'asse trasversale. 

Come ci si potrebbe aspettare, il comportamento delle proprietà di allineamento dipende dalla proprietà flex-direction. Per esempio, justify-contenuti allinea gli oggetti orizzontalmente se flex-direzione è riga o fila-reverse, ma verticalmente se flex-direzione è colonna o Colonna-reverse. Questa è la vera bellezza di a flessibile scatola.

Allineamento lungo l'asse principale

La proprietà justify-content allinea gli elementi flessibili all'interno del contenitore flex lungo l'asse principale. Distribuisce lo spazio extra rimasto dopo che il browser ha calcolato lo spazio necessario per tutti gli elementi nel contenitore flessibile. La proprietà justify-content può assumere cinque valori:

1. flex-start - gli elementi flessibili sono giustificati verso l'inizio dell'asse principale (questo è l'impostazione predefinita)
   
2. flex-end - gli elementi flessibili sono giustificati verso la fine dell'asse principale
   
3. centro - gli elementi flessibili sono giustificati attorno al centro dell'asse principale
   
4. spazio tra - gli elementi flessibili sono distribuiti uniformemente lungo l'asse principale, dalla flessione all'inizio alla flessione
   
5. spazio-around - gli elementi flessibili sono distribuiti uniformemente lungo l'asse principale, ma a ogni estremità vengono aggiunti spazi di dimensioni ridotte

Usare justify-contenuti correttamente, è necessario prestare attenzione alle direzioni dei propri assi. Ad esempio, il justify-content: flex-start; regola sempre stringe gli elementi flessibili all'inizio dell'asse principale. Questa è l'estremità sinistra quando la direzione della flessione è riga, la fine giusta quando è fila-reverse, il punto più alto quando è colonna, e il punto più basso quando è Colonna-reverse.

La seguente penna mostra come i diversi valori di justify-contenuti la proprietà allinea gli oggetti flessibili quando la direzione della flessione è riga.

Allineamento lungo l'asse trasversale

È ora di portare le cose al livello successivo. Puoi usare tre Proprietà CSS per allineare gli oggetti lungo l'asse trasversale. Due di loro (allineare-articoli e allineare-self) sono per allineamento a linea singola, mentre allineare-contenuti è per l'allineamento multilinea.

Allineamento a linea singola

Il allineare-articoli e allineare-self le proprietà definiscono come lo spazio è distribuito tra elementi flessibili lungo l'asse trasversale. In realtà, entrambi fanno la stessa cosa, ma mentre allineare-articoli allinea tutti gli oggetti all'interno del contenitore flex, allineare-self sostituisce questo allineamento predefinito per i singoli elementi flessibili. 

Entrambi possono assumere i seguenti valori: 

1. auto - rende la proprietà align-self eredita il valore di align-items (default per align-self)
   
2. flex-start -  gli elementi flessibili sono allineati all'inizio dell'asse trasversale
   
3. flex-end - gli elementi flessibili sono allineati verso la fine dell'asse trasversale
   
4. centro - gli elementi flessibili sono allineati attorno al centro dell'asse trasversale
   
5. linea di base - gli elementi flessibili sono allineati in modo tale che il loro allineamento di base si allinei
   
6. allungare - gli elementi flessibili sono allungati lungo l'asse trasversale per riempire il contenitore flessibile (impostazione predefinita per gli elementi di allineamento)
   

La penna qui sotto mostra come allineare-articoli e allineare-self le proprietà si comportano quando la direzione della flessione è riga. L'asse trasversale di default viene eseguito dall'alto verso il basso. Gli articoli hanno diverse quantità di imbottitura in modo da cambiare le loro altezze e linee di base. Puoi vedere, per esempio, il flex-start valore allinea gli articoli all'inizio dell'asse trasversale, mentre flex-end li allinea alla fine.

Naturalmente, quando flex-direzione è colonna o Colonna-reverse, lavorerai con un layout basato su colonne in modo che allineare-articoli e allineare-self le proprietà allineeranno invece gli elementi orizzontalmente.

Allineamento multilinea

La proprietà del contenuto di allineamento rende possibile l'allineamento su più righe lungo l'asse trasversale. Determina in che modo gli elementi flessibili in più linee sono distanziati l'uno dall'altro. La proprietà del contenuto di allineamento non ha alcun effetto su un contenitore flessibile a linea singola (ad esempio, quando il contenuto non si avvolge). Può assumere sei diversi valori: 

1. flex-start - gli elementi flessibili sono allineati all'inizio dell'asse trasversale
   
2. flex-end - gli elementi flessibili sono allineati alla fine dell'asse trasversale
   
3. centro - gli elementi flessibili sono allineati attorno al centro dell'asse trasversale
   
4. spazio tra - gli elementi flessibili sono distribuiti uniformemente lungo l'asse trasversale, tra inizio flex e fine flex
5. spazio-around - gli elementi flessibili sono distribuiti uniformemente lungo l'asse trasversale, ma a ogni estremità vengono aggiunti spazi di dimensioni ridotte
6. allungare - gli elementi flessibili sono allungati lungo l'asse trasversale per riempire il contenitore flessibile (impostazione predefinita)
   

Sotto, puoi vedere varie penne che mostrano come i diversi valori del allineare-contenuti lavoro di proprietà. Come per le altre demo, si applicano le direzioni degli assi predefinite. 

Questi primi due esempi non hanno una proprietà a riga singola (allineare-articoli) definito, quindi noterai che tutti gli elementi si estendono per impostazione predefinita. Nel prossimo esempio imposteremo align-items: flex-start; In modo che la elementi allineare verso l'inizio dell'asse trasversale, ma imposteremo allinea-contenuto: flex-end; In modo che la soddisfare è allineato verso la fine dell'asse:

Se hai afferrato tutto quello che abbiamo passato finora, hai fatto molto bene! Ora hai una solida conoscenza di base dell'allineamento della flexbox.

Conclusione

Sono stati fatti! Per ricapitolare; la cosa più importante da ricordare è che è necessario tenere a mente le direzioni degli assi principali e trasversali. Inizia sempre il tuo allineamento impostando il flex-direzione proprietà. Per saperne di più sull'allineamento di flexbox e mettere in pratica le tue conoscenze, puoi dare un'occhiata anche alle seguenti risorse:

• Documenti ufficiali del W3C per l'allineamento della flexbox Heavy-going, ma una lettura utile; anche i go-to doc per la flexbox.
• Come allineare gli elementi in un contenitore flessibile Una pagina dei documenti MDN con demo ed esempi di codice interattivi.
• Flexbox Cheatsheet di Joni Trythall Un semplice PDF cheatsheet per il download, con uva, pere e arance.
  
• Flexbox Froggy Un gioco online per imparare il flexbox, con rane e ninfee. Se vuoi cogliere l'allineamento flexbox intuitivamente prova questo gioco (puoi mettere in pratica tutto ciò che abbiamo trattato in questo tutorial).