Sintassi

Significato dei valori principali:

• stretch (default): le righe si allungano per riempire lo spazio disponibile.

• center: le righe vengono raggruppate al centro del contenitore.

• flex-start: le righe vengono allineate all'inizio del contenitore.

• flex-end: le righe vengono allineate alla fine del contenitore.

• space-between: le righe sono distribuite con spazi uguali tra loro, ma non ai margini.

• space-around: le righe hanno spazi uguali attorno ad esse (quindi spazio metà tra il bordo e la prima riga).

• space-evenly: spazi esattamente uguali tra tutte le righe e i bordi.

Importante:

• Ha effetto solo se ci sono più righe di elementi (cioè il contenitore ha il wrap attivo o è un grid multi-riga).

• Da non confondere con align-items, che agisce sui singoli elementi nella riga.

Esempio proprietà: align-content

Codice Esempio: align-content

CODE: CSS

1. .container {

2.   display: flex;

3.   flex-wrap: wrap;

4.   align-content: center;

5.   height: 300px;

6. }

Risultato: align-content

Prova questo esempio

DEMO

Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.

Supporto Browser