flex-wrap: nowrap vs wrap — gestione del trabocco

Una delle caratteristiche più evidenti, e a volte inaspettate, di Flexbox è che per default cerca di tenere tutti gli elementi su una singola riga.

Il problema del restringimento (nowrap)

Di default, i Flex Container hanno la proprietà flex-wrap impostata su nowrap.

Questo significa che se hai 10 elementi larghi 100px ciascuno, ma il contenitore genitore è largo solo 500px, Flexbox non manderà a capo gli elementi extra. Proverà invece a restringerli per farli stare tutti sulla stessa riga.

A volte è utile, per esempio in una barra di navigazione orizzontale, ma può rendere illeggibili card e contenuti più larghi.

Permettere di andare a capo: wrap

Per creare layout a griglia rudimentali (come una galleria di immagini o di prodotti), devi permettere ai figli di “rompere le righe”. Lo fai applicando al genitore:

.galleria {
  display: flex;
  flex-wrap: wrap; /* Permette l'a capo automatico */
}

.foto {
  width: 250px; /* Adesso questa misura verrà rispettata rigorosamente */
}

Con wrap attivo, Flexbox inserisce sulla prima riga tante .foto quante riescono a starci a 250px. Appena non c’è più spazio, l’elemento successivo passa alla riga sottostante, creando un layout multiriga responsive senza bisogno di media query.

wrap-reverse

Come per la direzione, puoi usare wrap-reverse per far andare a capo gli elementi verso l’alto invece che verso il basso. Si usa raramente, ma esiste.

Allineare le righe: align-content

Attenzione: quando attivi il wrap e hai più righe, entra in gioco una nuova proprietà per il genitore: align-content.

Molti la confondono con align-items, ma c’è una differenza cruciale:

• align-items: Allinea i singoli elementi all’interno della loro riga specifica.
• align-content: Muove l’intero blocco di righe all’interno dell’altezza del contenitore (se il contenitore è più alto dello spazio richiesto dalle righe).

I valori di align-content sono simili a quelli di justify-content:

• flex-start / flex-end (allinea tutte le righe in alto/basso)
• center (centra il blocco di righe al centro del genitore)
• space-between / space-around (distribuisce lo spazio vuoto tra le righe)

.contenitore-alto {
  display: flex;
  flex-wrap: wrap;
  height: 800px;
  align-content: space-between; /* Spinge la prima riga in alto, l'ultima in basso */
}

Promemoria: align-content non ha effetto se c’è una sola riga, cioè se flex-wrap è impostato su nowrap. Funziona solo sui layout multiriga.