Alle de almindelige flexbox-egenskaber, grupperet efter hvor de gælder: containeren og elementet. Hver række parrer egenskaben med dens almindelige værdier og dens virkning.
Flexbox placerer elementer i én dimension: en række eller en kolonne. Sæt display: flex på forælderen, og den bliver flex-containeren; dens direkte børn bliver flex-elementer. Container-egenskaberne styrer fordelingen langs hovedaksen og tværaksen; element-egenskaberne styrer, hvordan et enkelt element vokser, krymper eller retter sig ind. Vælg flexbox til endimensionale bjælker, rækker og centrering.
Referencetabel · 13 poster
CSS FlexboxExplained
13 of 13 rows
Container
flex | inline-flex
Gør elementet til en flex-container.
row | column | row-reverse | column-reverse
Sætter hovedaksen, som elementerne flyder langs.
flex-start | center | space-between | space-around | space-evenly
Fordeler elementerne langs hovedaksen.
stretch | center | flex-start | flex-end | baseline
Retter elementerne ind langs tværaksen.
flex-start | center | stretch | space-between
Retter ombrudte rækker ind, når der er ekstra plads på tværaksen.
nowrap | wrap | wrap-reverse
Lader elementer bryde til nye linjer i stedet for at krympe.
0.5rem | 8px 16px
Mellemrum mellem elementerne, vandret og lodret.
Element
0 | 1 | 2
Hvor meget ledig plads elementet optager i forhold til sine søskende.
0 | 1
Hvor meget elementet krymper, når der ikke er plads nok.
auto | 200px | 50%
Startstørrelsen, før den ledige plads fordeles.
1 | 1 0 auto | 0 0 200px
Forkortelse for grow shrink basis.
auto | center | flex-start | flex-end | stretch
Tilsidesætter containerens align-items for ét element.