Flexbox da zero: container, items, main axis, cross axis

MDN definisce flexbox in una frase: un modello di layout a una dimensione per distribuire spazio tra elementi. «Una dimensione» significa che gestisce gli elementi in fila, o in colonna, una direzione alla volta, mai entrambe insieme (quello è il lavoro di CSS Grid).

Possiamo pensare di disporre delle persone in fila indiana: puoi decidere quanto distanziarle, se farle stare più vicine ai lati o distribuite uniformemente, se farle allineare per altezza. Ma stai sempre gestendo una singola fila: se ti servisse organizzarle anche su più righe con colonne allineate tra loro, ti servirebbe un'altra struttura, una griglia.

1. Container e items: chi comanda, chi obbedisce

Impostando display: flex su un elemento, quell'elemento diventa il flex container, e tutti i suoi figli diretti diventano automaticamente flex items: si dispongono in riga, l'uno accanto all'altro, senza scrivere altro.

<style>
   .contenitore { display: flex; }
</style>

<div class="contenitore"> 
   <div>Uno</div> 
   <div>Due</div> 
   <div>Tre</div> 
</div>

Fonte: MDN Web Docs, «Basic concepts of flexbox»: flexbox è un modello di layout a una dimensione per distribuire spazio tra elementi.

2. Main axis e cross axis: gli assi che governano tutto

Il concetto chiave, da capire prima di ogni proprietà: il main axis è l'asse definito da flex-direction; il cross axis gli corre perpendicolare. Con flex-direction: row (il valore predefinito), il main axis è orizzontale e il cross axis è verticale; se invece flex-direction: column, si scambiano.

.contenitore { 
   display: flex; 
   flex-direction: row; /* default: main axis orizzontale */ 
   /* flex-direction: column; main axis verticale */ 
}

Immagina di scegliere se scrivere una lista andando verso destra (righe) o andando verso il basso (colonne). Il senso di scrittura che scegli è il main axis; l'altra direzione, quella in cui gli elementi si allineano tra loro, è il cross axis. Cambiando direzione, i due assi si scambiano di ruolo.

Fonte: MDN Web Docs, «Basic concepts of flexbox»: il main axis è definito da flex-direction, il cross axis gli corre perpendicolare. 

3. justify-content contro align-items: un asse ciascuno

justify-content allinea gli elementi sul main axis; align-items li allinea sul cross axis. È la coppia di proprietà più usata nelle flexbox, e vanno impostate sul container, non sui singoli item.

.contenitore {
    display: flex;
    justify-content: space-between; /* distribuzione sul main axis */
    align-items: center; /* allineamento sul cross axis */
}

Nota tecnica poco conosciuta: il valore predefinito di align-items è stretch. Per questo, senza specificare nulla, gli elementi flex si allungano automaticamente fino a riempire l'altezza del container sul cross axis.

Fonte: MDN Web Docs, «Basic concepts of flexbox»: align-items allinea sul cross axis, con valore iniziale stretch.

Fonte: MDN Web Docs, «Aligning items in a flex container»: justify-content controlla l'allineamento sul main axis. 

4. flex-wrap: quando gli elementi vanno a capo

Per impostazione predefinita, flexbox prova a stare su un'unica riga, restringendo gli elementi se serve. flex-wrap: wrap permette agli elementi in eccesso di andare a capo su una nuova riga, o colonna.

.contenitore { 
   display: flex; 
   flex-wrap: wrap; 
}

Con più righe attive, entra in gioco anche align-content: controlla lo spazio tra le righe sul cross axis, diverso da align-items, che allinea i singoli elementi dentro ciascuna riga.

Fonte: MDN Web Docs, «align-content»: la proprietà agisce solo quando il flex container ha più righe attive, per esempio con flex-wrap impostato a wrap. 

5. gap: lo spazio tra gli elementi, senza margini improvvisati

gap imposta lo spazio tra i flex item, senza aggiungere spazio prima del primo o dopo l'ultimo. È diverso da quanto si otteneva un tempo simulando lo spazio con margin su ogni elemento.

.contenitore {
    display: flex;
    gap: 16px; /* stessa spaziatura riga e colonna */

    /*
    row-gap: 16px;
    column-gap: 8px;
    valori diversi per riga e colonna
    */
}

Fonte: MDN Web Docs, «gap»: la proprietà imposta lo spazio tra i flex item senza aggiungerne prima del primo o dopo l'ultimo.

In sintesi

Il segreto per non confondersi con flexbox è uno solo: prima guarda flex-direction e stabilisci mentalmente dove sono i due assi. Solo dopo scegli se una proprietà agisce sul main o sul cross axis: il resto sono solo nomi da imparare.