Alle vanlige flexbox-egenskaper, gruppert etter hvor de gjelder: beholderen og elementet. Hver rad kobler egenskapen til sine vanlige verdier og hva den gjør.
Flexbox legger ut elementer i én dimensjon: en rad eller en kolonne. Sett display: flex på foreldrelementet, og det blir flex-beholderen; de direkte barna blir flex-elementer. Beholderegenskapene styrer fordelingen langs hovedaksen og tverraksen; elementegenskapene styrer hvordan et enkelt element vokser, krymper eller stiller seg. Velg flexbox for endimensjonale linjer, rader og sentrering.
Referansetabell · 13 oppføringer
CSS FlexboxExplained
13 of 13 rows
Beholder
flex | inline-flex
Gjør elementet om til en flex-beholder.
row | column | row-reverse | column-reverse
Setter hovedaksen elementene flyter langs.
flex-start | center | space-between | space-around | space-evenly
Fordeler elementene langs hovedaksen.
stretch | center | flex-start | flex-end | baseline
Stiller elementene langs tverraksen.
flex-start | center | stretch | space-between
Stiller rader som brytes til nye linjer når det er ekstra plass på tverraksen.
nowrap | wrap | wrap-reverse
La elementene brytes til nye linjer i stedet for å krympe.
0.5rem | 8px 16px
Mellomrom mellom elementene, vannrett og loddrett.
Element
0 | 1 | 2
Hvor mye ledig plass elementet tar opp i forhold til søsknene sine.
0 | 1
Hvor mye elementet krymper når det ikke er nok plass.
auto | 200px | 50%
Startstørrelsen før ledig plass fordeles.
1 | 1 0 auto | 0 0 200px
Kortform for grow shrink basis.
auto | center | flex-start | flex-end | stretch
Overstyrer beholderens align-items for ett element.
0 | -1 | 2
Endre rekkefølgen på et element uten å endre kilden.