Come funziona Flexbox — spiegato con grandi gif colorate e animate

Articolo originale: https://www.freecodecamp.org/news/an-animated-guide-to-flexbox-d280cf6afc35/

Flexbox promette di salvarci dai mali del semplice CSS (come l'allineamento verticale).

Bene, Flexbox ci permette di raggiungere questo obiettivo. Ma padroneggiare il suo nuovo modello mentale può essere difficile.

Diamo quindi uno sguardo animato a come funziona Flexbox, in modo da poterlo usare per creare dei layout migliori.

Il principio alla base di Flexbox è rendere i layout flessibili e intuitivi.

Per ottenere questo risultato, fa sì che i contenitori possano decidere da soli come distribuire uniformemente i propri elementi figli — inclusi la loro dimensione e lo spazio tra di essi.

Tutto ciò suona bene in linea di principio. Ma vediamo come si presenta in pratica.

In questo articolo, analizzeremo le 5 proprietà Flexbox più comuni. Esploreremo cosa fanno, come si possono usare e qual è il risultato effettivo.

Proprietà #1: display: flex

Ecco una pagina web di esempio:

Ci sono quattro div colorati di dimensioni diverse, all'interno di un div contenitore grigio. Per ora ogni div ha la proprietà predefinita display: block. Quindi, ogni quadrato occupa l'intera larghezza della sua riga.

Per utilizzare Flexbox, dobbiamo rendere l'elemento contenitore un contenitore flex, in questo modo:

#contenitore {
    display: flex;
}

Non è cambiato molto — ora i div sono visualizzati in linea, ma questo è tutto. Tuttavia, dietro le quinte abbiamo fatto una cosa molto importante. Abbiamo fornito ai quadrati qualcosa chiamato contesto flex.

Ora possiamo iniziare a posizionarli all'interno di questo contesto, con molta meno difficoltà rispetto al CSS tradizionale.

Proprietà #2: flex-direction

Un contenitore Flexbox ha due assi: un asse principale (main) e un asse trasversale (cross). Nella modalità predefinita hanno questa orientazione:

Di default, gli elementi sono disposti lungo l'asse principale, da sinistra a destra. Ecco perché i quadrati si sono disposti in una riga orizzontale non abbiamo applicato display: flex.

Tuttavia, la proprietà flex-direction, consente di ruotare l'asse principale.

#contenitore {
    display: flex;
    flex-direction: column;
}

Qui c'è un'importante distinzione da fare: flex-direction: column non allinea i quadrati sull'asse trasversale invece di quello principale. Cambia l'asse principale stesso da orizzontale a verticale.

Esistono anche un paio di altre opzioni per flex-direction: row-reverse e column-reverse.

Proprietà #3: justify-content

justify-content controlla l'allineamento degli elementi sull'asse principale.

Qui ci addentriamo maggiormente nella distinzione tra asse principale e trasversale. Innanzitutto, ritorniamo a flex-direction: row.

#contenitore {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

Abbiamo cinque valori a disposizione per justify-content:

1. flex-start
2. flex-end
3. center
4. space-between
5. space-around

space-around e space-between sono i meno intuitivi. space-between dà uguale spazio tra ciascun quadrato, ma non tra i quadrati e il contenitore.

space-around inserisce un cuscino di spazio uguale su entrambi i lati del quadrato — il che vuole dire che lo spazio tra i quadrati più esterni e il contenitore è la metà dello spazio tra due quadrati (ogni quadrato contribuisce con un uguale ammontare di margine non sovrapposto, quindi raddoppiando lo spazio).

Una nota finale: ricorda che justify-content lavora lungo l'asse principale, e flex-direction inverte l'asse principale. Questo sarà importante mentre ci spostiamo verso…

Proprietà #4: align-items

Se hai 'afferrato' justify-content, align-items sarà un gioco da ragazzi.

Se justify-content lavora lungo l'asse principale, align-items si applica all'asse trasversale.

Reimpostiamo la direzione su flex-direction: row, in modo che gli assi siano uguali a quelli dell'immagine qui sopra.

Ora approfondiamo i comandi di align-items.

1. flex-start
2. flex-end
3. center
4. stretch
5. baseline

I primi tre sono esattamente gli stessi di justify-content, quindi niente di particolare qui.

Tuttavia gli altri due sono un po' diversi.

Abbiamo stretch, in cui gli elementi occupano l'intero asse trasversale e baseline, in cui la parte inferiore dei tag di paragrafo è allineata.

Nota che per align-items: stretch, ho dovuto impostare l'altezza dei quadrati su auto, altrimenti la proprietà height avrebbe la precedenza su stretch.

Per baseline, sii consapevole che se togli i tag di paragrafo, l'allineamento avviene rispetto alla base dei quadrati, in questo modo:

Per una migliore dimostrazione degli assi principale e trasversale, combiniamo le proprietà justify-content e align-items per vedere come funziona la centratura in modo diverso per i due valori di flex-direction:

Con row, i quadrati sono disposti lungo un asse principale orizzontale. Con column, si dispongono lungo un asse principale verticale.

Anche se i quadrati sono centrati sia verticalmente che orizzontalmente in entrambi i casi, i due non sono intercambiabili!

Proprietà #5: align-self

align-self ci consente di manipolare manualmente l'allineamento di un particolare elemento.

In pratica, sovrascrive align-items per un quadrato. Tutte le proprietà sono le stesse, sebbene l'impostazione predefinita sia auto, in cui segue la proprietà align-items del contenitore.

#contenitore {
     align-items: flex-start;
 }

.quadrato#uno {
    align-self: center;
}
// Solo questo quadrato verrà centrato.

Vediamo qual è il risultato applicando align-self a due quadrati e align-items: center e flex-direction: row agli altri.

Conclusione

Anche se è abbiamo affrontato Flexbox scavando soltanto in superficie, questi comandi dovrebbero essere sufficienti per gestire la maggior parte degli allineamenti di base — e per allineare verticalmente quello che desideri.

Grazie per aver letto questo articolo!