Elke gangbare flexbox-eigenschap, gegroepeerd op waar ze van toepassing zijn: de container en het item. Elke rij koppelt de eigenschap aan zijn gebruikelijke waarden en wat hij doet.
Flexbox legt elementen uit in één dimensie: een rij of een kolom. Zet display: flex op de ouder en deze wordt de flex-container; de directe kinderen worden flex-items. De containereigenschappen bepalen de verdeling langs de hoofd-as en de kruis-as; de itemeigenschappen bepalen hoe een afzonderlijk item groeit, krimpt of zich uitlijnt. Kies flexbox voor eendimensionale balken, rijen en centrering.
Referentietabel · 13 items
CSS FlexboxExplained
13 of 13 rows
Container
flex | inline-flex
Maakt van het element een flex-container.
row | column | row-reverse | column-reverse
Stelt de hoofd-as in waarlangs de items stromen.
flex-start | center | space-between | space-around | space-evenly
Verdeelt de items langs de hoofd-as.
stretch | center | flex-start | flex-end | baseline
Lijnt de items uit langs de kruis-as.
flex-start | center | stretch | space-between
Lijnt omgeslagen rijen uit wanneer er extra ruimte is op de kruis-as.
nowrap | wrap | wrap-reverse
Laat items omslaan naar nieuwe regels in plaats van te krimpen.
0.5rem | 8px 16px
Ruimte tussen items, horizontaal en verticaal.
Item
0 | 1 | 2
Hoeveel vrije ruimte het item opneemt ten opzichte van de andere items.
0 | 1
Hoeveel het item krimpt wanneer er niet genoeg ruimte is.
auto | 200px | 50%
De begingrootte voordat vrije ruimte wordt verdeeld.
1 | 1 0 auto | 0 0 200px
Verkorte notatie voor grow shrink basis.
auto | center | flex-start | flex-end | stretch
Overschrijft align-items van de container voor één item.
0 | -1 | 2
Zet een item in een andere volgorde zonder de bron te wijzigen.