Varje vanlig flexbox-egenskap, grupperad efter var den gäller: containern och elementet. Varje rad parar egenskapen med dess vanliga värden och vad den gör.
Flexbox lägger ut element i en dimension: en rad eller en kolumn. Sätt display: flex på föräldern så blir den flexbehållaren; dess direkta barn blir flexobjekt. Containeregenskaperna styr fördelningen längs huvudaxeln och tväraxeln; objektegenskaperna styr hur ett enskilt objekt växer, krymper eller ställer in sig. Välj flexbox för endimensionella listrader, rader och centrering.
Referenstabell · 13 poster
CSS FlexboxExplained
13 of 13 rows
Container
flex | inline-flex
Gör elementet till en flexbehållare.
row | column | row-reverse | column-reverse
Sätter huvudaxeln som objekten flödar längs.
flex-start | center | space-between | space-around | space-evenly
Fördelar objekten längs huvudaxeln.
stretch | center | flex-start | flex-end | baseline
Justerar objekten längs tväraxeln.
flex-start | center | stretch | space-between
Justerar ombrutna rader när det finns extra utrymme på tväraxeln.
nowrap | wrap | wrap-reverse
Låter objekt brytas till nya rader i stället för att krympa.
0.5rem | 8px 16px
Utrymme mellan objekten, horisontellt och vertikalt.
Objekt
0 | 1 | 2
Hur mycket ledigt utrymme objektet tar upp i förhållande till sina syskon.
0 | 1
Hur mycket objektet krymper när utrymmet inte räcker.
auto | 200px | 50%
Startstorleken innan ledigt utrymme delas ut.
1 | 1 0 auto | 0 0 200px
Kortform för grow shrink basis.
auto | center | flex-start | flex-end | stretch
Åsidosätter containerns align-items för ett objekt.
0 | -1 | 2
Ändra ordningen på ett objekt utan att ändra källan.