align-content

Controla com es distribueixen les LÍNIES quan hi ha wrapwrap i espai vertical sobrant.

Només funciona si: 1) hi ha diverses línies i 2) el contenidor és més alt que les línies.
align-content: stretch (per defecte)
1
2
3
4
5
6
7
8
9
Les línies s’estiren per ocupar TOT l’espai vertical disponible.
align-content: flex-start
1
2
3
4
5
6
7
8
9
Totes les línies s’acumulen a la part superior.
align-content: flex-end
1
2
3
4
5
6
7
8
9
Les línies baixen a la part inferior.
align-content: center
1
2
3
4
5
6
7
8
9
Les línies queden centrades verticalment dins del contenidor.
align-content: space-between
1
2
3
4
5
6
7
8
9
Primera línia dalt, última línia baix, i espai màxim entre línies.
align-content: space-around
1
2
3
4
5
6
7
8
9
Cada línia té espai a dalt i baix. Els extrems tenen la meitat.
align-content: space-evenly
1
2
3
4
5
6
7
8
9
TOT l’espai vertical es reparteix igual entre totes les línies.
En resum:

• stretch → les línies s’estiren (per defecte).
• flex-start → totes dalt.
• flex-end → totes baix.
• center → totes al centre vertical.
• space-between → primera dalt, última baix, espai màxim al mig.
• space-around → espais iguals però extrems a la meitat.
• space-evenly → espai uniforme per a totes les línies.