align-content: allineamento su righe multiple

align-content entra in gioco solo in una situazione precisa: il contenitore flex ha più righe e possiede spazio libero sull’asse trasversale.

Per questo viene spesso confusa con align-items, ma risponde a una domanda diversa.

align-items vs align-content

align-items allinea gli elementi dentro la loro riga.

align-content allinea o distribuisce l’insieme delle righe dentro il contenitore.

.galleria {
  display: flex;
  flex-wrap: wrap;
  height: 500px;
  gap: 1rem;
  align-content: center;
}

Qui align-content: center non centra ogni singola card. Centra il blocco formato da tutte le righe disponibili.

Perché spesso sembra non funzionare

align-content non ha effetto se:

1. il contenitore ha una sola riga;
2. flex-wrap è nowrap;
3. il contenitore non ha spazio libero sull’asse trasversale.

Questo esempio non mostrera’ differenze visibili:

.menu {
  display: flex;
  align-content: center;
}

Manca flex-wrap: wrap e, molto probabilmente, manca anche un’altezza sufficiente per creare spazio libero.

Valori principali

.galleria {
  display: flex;
  flex-wrap: wrap;
  height: 600px;
}

Con questa base puoi provare:

.galleria {
  align-content: flex-start;
}

Le righe restano raccolte all’inizio del contenitore.

.galleria {
  align-content: center;
}

Il gruppo di righe viene centrato.

.galleria {
  align-content: space-between;
}

La prima riga va all’inizio, l’ultima alla fine, e lo spazio libero viene distribuito fra le righe.

.galleria {
  align-content: stretch;
}

Le righe si allungano per occupare lo spazio disponibile. È il valore predefinito in molti casi.

Quando usarlo davvero

align-content serve in layout come:

• gallerie di card su più righe;
• gruppi di tag o badge che vanno a capo;
• aree alte in cui vuoi controllare come si distribuiscono le righe.

Non usarlo per centrare un singolo bottone o una singola riga di navigazione: in quei casi ti servono align-items e justify-content.

Esercizio

Crea dodici card larghe 140px dentro un contenitore largo 500px e alto 500px.

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  height: 500px;
  align-content: space-between;
}

Poi cambia space-between in center, flex-start e stretch. Se il numero di righe non cambia ma cambia la distribuzione verticale, hai capito lo scopo della proprietà.