Prontuario CSS Flexbox: proprietà e valori
Flexbox dispone gli item in una dimensione — una riga o una colonna — e distribuisce lo spazio tra loro. Le proprietà si dividono in due gruppi: quelle che imposti sul contenitore (il genitore flex) e quelle sugli item (i suoi figli).
Il modello mentale: flex-direction imposta l'asse principale; justify-content allinea lungo di esso, e align-items allinea lungo l'asse trasversale perpendicolare.
Aggiornato 2026-07-06
Proprietà del contenitore (il genitore flex)
| Proprietà | Valori | Cosa fa |
|---|---|---|
| display | flex | inline-flex | Trasformare un elemento in contenitore flex |
| flex-direction | row | row-reverse | column | column-reverse | Direzione dell'asse principale |
| flex-wrap | nowrap | wrap | wrap-reverse | Se gli item vanno a capo su nuove righe |
| justify-content | flex-start | center | flex-end | space-between | space-around | space-evenly | Allineamento lungo l'asse principale |
| align-items | stretch | flex-start | center | flex-end | baseline | Allineamento lungo l'asse trasversale |
| align-content | flex-start | center | space-between | stretch | Allinea le righe andate a capo (multi-riga) |
| gap | <length> (e.g. 16px) | Spazio tra gli item |
Proprietà degli item (i figli)
| Proprietà | Valori | Cosa fa |
|---|---|---|
| flex-grow | 0 | <number> | Quanto un item cresce per riempire lo spazio |
| flex-shrink | 1 | <number> | Quanto un item si restringe quando lo spazio è poco |
| flex-basis | auto | <length> | La dimensione iniziale dell'item prima di grow/shrink |
| flex | e.g. 1 1 0 | 1 | auto | Scorciatoia per grow, shrink e basis |
| align-self | auto | center | flex-start | flex-end | stretch | Sovrascrivere align-items per un item |
| order | 0 | <integer> | Riordinare un item visivamente (il minore viene prima) |
Il trucco di centratura più comune: sul contenitore, imposta display: flex; justify-content: center; align-items: center; per centrare un figlio sia orizzontalmente che verticalmente. Per le unità di dimensione usate in questi valori, vedi il riferimento delle unità CSS.