CSS Flexbox

Finora abbiamo visto come colorare e spaziare singoli elementi. Ora affrontiamo il problema del layout: come disporre più elementi uno accanto all’altro, centrarli, distribuirli nello spazio disponibile.

Flexbox (Flexible Box Layout) è pensato esattamente per questo: disporre elementi in una riga o in una colonna, con controllo su allineamento e distribuzione dello spazio.

Note

Flexbox vs Grid

Flexbox e Grid sono due metodi di layout diversi: Flexbox è più semplice e flessibile e adatto a layout in una sola dimensione (riga o colonna), mentre Grid è più complicato e potente e adatto a layout bidimensionale (righe e colonne).

Nel nostro corso introduttivo, parlare di Flexbox basta e avanza… eventuali layout bidimensionali saranno affrontati come composizione di layout Flexbox.

Attivare Flexbox

Flexbox si attiva su un contenitore, e influenza il comportamento dei suoi figli diretti:

<nav class="menu">
    <a href="#">Home</a>
    <a href="#">Chi siamo</a>
    <a href="#">Contatti</a>
</nav>

.menu {
    display: flex;
}

Con una sola riga di CSS, i tre link — che di default sarebbero elementi in linea — si dispongono ordinatamente su una riga, uno accanto all’altro. Il contenitore (.menu) si dice flex container, i suoi figli diretti (i tre <a>) sono i flex item(s).

Tip

Pensa a display: flex come a un “modo di disporre” che passi al contenitore: è il contenitore a decidere come organizzare i suoi figli, un po’ come una funzione che decide come disporre gli elementi di una lista che le viene passata.

Direzione: riga o colonna

.menu {
    display: flex;
    flex-direction: row; /* valore di default: elementi in riga */
}

.scheda {
    display: flex;
    flex-direction: column; /* elementi impilati in colonna */
}

Allineamento: le due proprietà chiave

Le due proprietà più usate si applicano al contenitore, non ai singoli elementi:

.menu {
    display: flex;
    justify-content: space-between; /* asse principale (orizzontale, se row) */
    align-items: center;            /* asse trasverso (verticale, se row) */
}

justify-content controlla la distribuzione lungo la direzione principale (orizzontale se flex-direction: row):

justify-content: flex-start;    /* elementi ammassati all'inizio: sinistra o alto (default) */
justify-content: flex-end;      /* elementi ammassati alla fine: destra o basso */
justify-content: center;        /* elementi centrati */
justify-content: space-between; /* primo e ultimo ai bordi, spazio uniforme fra gli altri */
justify-content: space-around;  /* spazio uniforme intorno a ogni elemento */
justify-content: space-evenly;  /* spazio identico intorno ad ogni elemento */

align-items controlla l’allineamento sull’asse trasversale (verticale se flex-direction: row, orizzontale se… capito no?):

align-items: normal;     /* elementi non modificati (default) */
align-items: stretch;    /* elementi allungati per riempire la direzione trasversale */
align-items: center;     /* elementi centrati trasversalmente */
align-items: flex-start; /* elementi allineati all'inizio in senso trasversale */
align-items: flex-end;   /* elementi allineati alla fine in senso trasversale */
align-items: baseline;   /* elementi allineati alla base del contenitore */

Tip

Il modo più semplice per ricordarsi le due proprietà:

• justify-content lavora “nella stessa direzione” della riga/colonna (avanti-indietro),
• align-items lavora “trasversalmente” rispetto ad essa.

Andare a capo: flex-wrap

Di default, Flexbox prova a mettere tutti gli elementi su una riga sola, anche a costo di stringerli troppo. Per farli andare a capo quando non c’è spazio:

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

Esercizi

Esercizio w221

Crea 3 <div> dentro un contenitore con display: flex. Disponili in riga, centrati sia orizzontalmente (justify-content: center) sia verticalmente (align-items: center), dando al contenitore un’altezza di almeno 200px per vedere l’effetto.

Esercizio w222

Prendi lo stesso contenitore dell’esercizio precedente e cambia flex-direction in column. Osserva come cambiano gli effetti di justify-content e align-items (cosa controllavano prima in orizzontale, ora controllano in verticale).

Esercizio w223

Crea un <nav> con 5 link. Usando Flexbox, distribuiscili con justify-content: space-between, poi prova space-around e osserva la differenza. Scrivi in un commento CSS quale useresti per un menu di navigazione reale, e perché.

Esercizio w224

Nel seguente CSS manca display: flex sul contenitore, quindi le proprietà justify-content e align-items non hanno alcun effetto. Correggi il problema:

.contenitore {
    justify-content: center;
    align-items: center;
    height: 300px;
}