Tutte le proprietà flexbox comuni, raggruppate per punto di applicazione: il container e l'item. Ogni riga abbina la proprietà ai suoi valori comuni e al suo effetto.
Flexbox dispone gli elementi in una dimensione: una riga o una colonna. Imposta display: flex sul genitore e diventa il flex container; i suoi figli diretti diventano flex item. Le proprietà del container controllano la distribuzione lungo l'asse principale e l'asse trasversale; le proprietà dell'item controllano come un singolo elemento cresce, si riduce o si allinea. Scegli flexbox per barre, righe e centraggi unidimensionali.
Tabella di riferimento · 13 voci
CSS FlexboxExplained
13 of 13 rows
Container
flex | inline-flex
Trasforma l'elemento in un flex container.
row | column | row-reverse | column-reverse
Imposta l'asse principale lungo cui scorrono gli item.
flex-start | center | space-between | space-around | space-evenly
Distribuisce gli item lungo l'asse principale.
stretch | center | flex-start | flex-end | baseline
Allinea gli item lungo l'asse trasversale.
flex-start | center | stretch | space-between
Allinea le righe andate a capo quando c'è spazio extra sull'asse trasversale.
nowrap | wrap | wrap-reverse
Permette agli item di andare a capo su nuove righe invece di ridursi.
0.5rem | 8px 16px
Spazio tra gli item, in orizzontale e in verticale.
Item
0 | 1 | 2
Quanto spazio libero l'elemento assorbe rispetto ai suoi fratelli.
0 | 1
Quanto l'elemento si riduce quando lo spazio non basta.
auto | 200px | 50%
La dimensione di partenza prima che lo spazio libero venga distribuito.
1 | 1 0 auto | 0 0 200px
Abbreviazione di grow shrink basis.
auto | center | flex-start | flex-end | stretch
Sovrascrive align-items del container per un singolo item.