Guida CSS interattiva: Flex wrap

Q: Che differenza c'è tra flex-direction row e column?

row (il valore predefinito) mette gli elementi uno accanto all'altro nella direzione di scrittura, e column li impila dall'alto in basso. L'asse principale ruota di conseguenza, quindi in una colonna justify-content lavora in verticale e align-items in orizzontale.

Q: Cos'è flex-flow?

Una forma abbreviata per flex-direction e flex-wrap in una sola dichiarazione: flex-flow: row wrap; equivale a flex-direction: row; flex-wrap: wrap;.

Q: Che differenza c'è tra align-items e align-content?

align-items posiziona gli elementi dentro la loro riga. align-content posiziona le righe stesse dentro il contenitore, quindi conta solo quando il contenitore ha flex-wrap: wrap ed è più alto delle sue righe.

flex-wrap: una riga, o tutte quelle che servono

Per impostazione predefinita un contenitore flex tiene tutti i suoi elementi su una riga (flex-wrap: nowrap) e li restringe per farceli stare. flex-wrap: wrap invece lascia loro la propria dimensione e li fa passare alla riga successiva:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>flex-wrap</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .box { display: flex; gap: 8px; width: 340px; padding: 8px; background: #e5e7eb; margin-bottom: 12px; }
    .item { width: 100px; height: 36px; background: #2563eb; color: white; }
    .wrap { flex-wrap: wrap; }
  </style>
</head>
<body>
  <code>flex-wrap: nowrap (default)</code>
  <div class="box"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div></div>
  <code>flex-wrap: wrap</code>
  <div class="box wrap"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div></div>
  <script>
    document.querySelectorAll('.box').forEach((box) => {
      box.children[0].textContent = Math.round(box.children[0].getBoundingClientRect().width) + 'px wide';
    });
  </script>
</body>
</html>

Ogni elemento chiede 100px, cinque elementi in un box da 340px. Cinque elementi e quattro spazi da 8px richiedono 532px, quindi senza andare a capo ogni elemento viene stretto a circa 62px, perché gli elementi flex si restringono per impostazione predefinita. Con wrap restano da 100px: tre stanno sulla prima riga e gli altri due passano a una seconda riga.

Valori di flex-wrap

Valore	Cosa succede
`nowrap` (predefinito)	Una riga. Gli elementi si restringono, ed escono dal contenitore quando non possono restringersi ancora
`wrap`	Gli elementi che non ci stanno iniziano una nuova riga sotto
`wrap-reverse`	Lo stesso, ma le nuove righe si impilano verso l'alto: la prima riga è in basso

Guarda gli elementi andare a capo

Trascina il cursore per cambiare la larghezza del contenitore. Il riquadro di lettura conta le righe e dice quanti elementi ci sono su ognuna:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Wrap slider</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    #box { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px; background: #e5e7eb; margin: 10px 0; }
    .item { width: 90px; height: 40px; background: #16a34a; color: white; display: flex; align-items: center; justify-content: center; }
  </style>
</head>
<body>
  <label>container width <input id="w" type="range" min="120" max="620" value="400"> <span id="wv"></span></label>
  <div id="box"></div>
  <p id="out"></p>
  <script>
    const box = document.getElementById('box');
    for (let i = 1; i <= 6; i++) box.insertAdjacentHTML('beforeend', '<div class="item">' + i + '</div>');
    const update = () => {
      const w = document.getElementById('w').value;
      box.style.width = w + 'px';
      document.getElementById('wv').textContent = w + 'px';
      const lines = {};
      [...box.children].forEach((c) => { const top = Math.round(c.getBoundingClientRect().top); lines[top] = (lines[top] || 0) + 1; });
      const counts = Object.values(lines);
      document.getElementById('out').textContent = counts.length + ' line(s): ' + counts.join(' + ') + ' items';
    };
    document.getElementById('w').addEventListener('input', update);
    update();
  </script>
</body>
</html>

A 400px, quattro elementi da 90px e tre spazi da 8px (384px) stanno su una riga, quindi ottieni 4 + 2. Trascina verso 620px e tutti e sei stanno su una riga; trascina verso 120px e ogni elemento ha una riga tutta sua.

flex-direction: riga o colonna

flex-direction imposta la direzione in cui scorrono gli elementi, cioè l'asse principale:

Valore	Gli elementi scorrono	Primo elemento
`row` (predefinito)	uno accanto all'altro, nella direzione di scrittura	all'inizio della riga
`row-reverse`	uno accanto all'altro, al contrario	alla fine della riga
`column`	impilati, dall'alto in basso	in alto
`column-reverse`	impilati, dal basso in alto	in basso

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>flex-direction</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .grid { display: flex; flex-wrap: wrap; gap: 16px; }
    .box { display: flex; gap: 4px; padding: 6px; background: #e5e7eb; width: 160px; height: 110px; margin-top: 4px; }
    .box div { background: #2563eb; color: white; padding: 4px 10px; }
  </style>
</head>
<body>
  <div class="grid">
    <div><code>row</code><div class="box" style="flex-direction: row"><div>1</div><div>2</div><div>3</div></div></div>
    <div><code>row-reverse</code><div class="box" style="flex-direction: row-reverse"><div>1</div><div>2</div><div>3</div></div></div>
    <div><code>column</code><div class="box" style="flex-direction: column"><div>1</div><div>2</div><div>3</div></div></div>
    <div><code>column-reverse</code><div class="box" style="flex-direction: column-reverse"><div>1</div><div>2</div><div>3</div></div></div>
  </div>
</body>
</html>

Nei due box row gli elementi si allungano fino a tutta l'altezza del box, perché align-items: stretch agisce trasversalmente alla riga. Nei box column si allungano invece fino a tutta la larghezza, per lo stesso motivo. Gli assi hanno ruotato, e ogni proprietà di allineamento ha ruotato con loro (la pagina su justify-content lo mostra nel dettaglio).

flex-flow: entrambi in una riga

flex-flow è la forma abbreviata per flex-direction seguito da flex-wrap:

.cards { flex-flow: row wrap; }      /* flex-direction: row; flex-wrap: wrap; */
.stack { flex-flow: column nowrap; } /* flex-direction: column; flex-wrap: nowrap; */

Schede responsive con wrap e nessuna media query

Dai a ogni elemento una dimensione di partenza con flex: 1 1 180px e lascia che la riga vada a capo. Ogni elemento cresce fino a riempire la sua riga, e quando una riga non può contenere un altro elemento da 180px, il successivo va a capo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Wrapping cards</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .cards { display: flex; flex-wrap: wrap; gap: 12px; }
    .card {
      flex: 1 1 180px; /* grow, shrink, start at 180px */
      padding: 14px;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      background: #f9fafb;
    }
  </style>
</head>
<body>
  <div class="cards">
    <div class="card">One</div>
    <div class="card">Two</div>
    <div class="card">Three</div>
    <div class="card">Four</div>
    <div class="card">Five</div>
  </div>
</body>
</html>

In un'anteprima larga circa 800px, tre schede stanno sulla prima riga (circa 253px ciascuna) e le ultime due si dividono la seconda riga, dove ognuna cresce fino a circa 386px. Flexbox funziona così: ogni riga distribuisce il proprio spazio, quindi le schede su un'ultima riga corta finiscono per essere più larghe di quelle sopra. Se vuoi che l'ultima scheda resti larga come le altre, usa invece grid con repeat(auto-fill, minmax(180px, 1fr)) (vedi la pagina su grid).

align-content: spaziare le righe

Quando un contenitore va a capo ed è più alto delle sue righe, align-content decide dove vanno le righe. Accetta gli stessi valori di justify-content, più stretch:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>align-content</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .box { display: flex; flex-wrap: wrap; gap: 6px; width: 200px; height: 160px; background: #e5e7eb; }
    .box div { width: 60px; height: 30px; background: #f59e0b; }
    .row { display: flex; gap: 16px; }
  </style>
</head>
<body>
  <div class="row">
    <div><code>align-content: flex-start</code><div class="box" style="align-content: flex-start"><div></div><div></div><div></div><div></div><div></div></div></div>
    <div><code>align-content: space-between</code><div class="box" style="align-content: space-between"><div></div><div></div><div></div><div></div><div></div></div></div>
  </div>
</body>
</html>

Nel primo box entrambe le righe stanno in alto. Nel secondo la prima riga è in alto e la seconda in basso, con tutta l'altezza libera in mezzo.

Ordine invertito e accessibilità

row-reverse, column-reverse e wrap-reverse cambiano solo dove vengono disegnati gli elementi. Gli screen reader e il tasto Tab seguono comunque l'ordine dell'HTML, quindi chi usa la tastiera attraversa gli elementi nella direzione opposta a quella che vede. Inverti solo per un effetto visivo; quando l'ordine ha un significato, cambialo nell'HTML.

Errori comuni

Elementi che si restringono invece di andare a capo. Gli elementi con flex: 1 partono da un flex-basis di 0 e si stringono su una sola riga. Dagli una base reale, come flex: 1 1 200px.
Mettere flex-wrap sugli elementi. Va sul contenitore flex.
Usare align-items per spaziare le righe andate a capo. Allinea gli elementi dentro ogni riga; le righe stesse si spostano con align-content.
Un ultimo elemento solitario allungato su tutta la riga. È flex-grow su una riga con un solo elemento. Usa grid se ogni scheda deve avere la stessa larghezza.
Aspettarsi che flex-direction: column riempia un'altezza. Un contenitore a colonna è alto solo quanto il suo contenuto, a meno che tu non gli dia un height, quindi justify-content non ha spazio su cui lavorare.

Domande frequenti

Cosa fa flex-wrap: wrap?

Permette agli elementi flex di passare su una nuova riga quando non ci stanno in una sola. Con il valore predefinito nowrap, gli elementi restano su una riga e si restringono, oppure escono dal contenitore se non possono restringersi ancora.

Perché flex-wrap non funziona?

L'andata a capo avviene solo quando le dimensioni di partenza degli elementi superano, sommate, quella del contenitore. Gli elementi con flex: 1 partono da un flex-basis di 0, quindi non vanno mai a capo; dagli una vera dimensione di partenza (flex: 1 1 200px o width: 200px). Controlla anche che flex-wrap sia sul contenitore flex, non sugli elementi.

Che differenza c'è tra flex-direction row e column?

row (il valore predefinito) mette gli elementi uno accanto all'altro nella direzione di scrittura, e column li impila dall'alto in basso. L'asse principale ruota di conseguenza, quindi in una colonna justify-content lavora in verticale e align-items in orizzontale.

Cos'è flex-flow?

Una forma abbreviata per flex-direction e flex-wrap in una sola dichiarazione: flex-flow: row wrap; equivale a flex-direction: row; flex-wrap: wrap;.

Che differenza c'è tra align-items e align-content?

align-items posiziona gli elementi dentro la loro riga. align-content posiziona le righe stesse dentro il contenitore, quindi conta solo quando il contenitore ha flex-wrap: wrap ed è più alto delle sue righe.

Concetti correlati