Minden gyakori flexbox-tulajdonság, csoportosítva aszerint, hogy hol érvényes: a konténeren vagy az elemen. Minden sor a tulajdonságot mutatja a gyakori értékeivel és a hatásával.
A flexbox egy dimenzióban rendezi el az elemeket: sorban vagy oszlopban. Állítsd be a szülőn a display: flex értéket, és az flex konténerré válik; közvetlen gyermekei flex elemekké válnak. A konténer tulajdonságai a fő tengely és a kereszt tengely mentén való elosztást szabályozzák; az elem tulajdonságai azt, hogy egy adott elem hogyan nő, zsugorodik vagy igazodik. Egydimenziós sávokhoz, sorokhoz és középre igazításhoz válaszd a flexboxot.
Referenciatáblázat · 13 bejegyzés
CSS FlexboxExplained
13 of 13 rows
Konténer
flex | inline-flex
Flex konténerré alakítja az elemet.
row | column | row-reverse | column-reverse
Beállítja a fő tengelyt, amely mentén az elemek elhelyezkednek.
flex-start | center | space-between | space-around | space-evenly
Elemek elosztása a fő tengely mentén.
stretch | center | flex-start | flex-end | baseline
Elemek igazítása a kereszt tengely mentén.
flex-start | center | stretch | space-between
Több sorba tördelt sorok igazítása, ha a kereszt tengelyen szabad hely marad.
nowrap | wrap | wrap-reverse
Az elemek új sorokba tördelhetők zsugorodás helyett.
0.5rem | 8px 16px
Hely az elemek között, vízszintesen és függőlegesen.
Elem
0 | 1 | 2
Mennyi szabad teret nyel el az elem a testvéreihez képest.
0 | 1
Mennyit zsugorodik az elem, amikor nincs elég hely.
auto | 200px | 50%
A kiinduló méret, mielőtt a szabad hely elosztásra kerül.
1 | 1 0 auto | 0 0 200px
Rövidítés a grow shrink basis hármashoz.
auto | center | flex-start | flex-end | stretch
Egy elemnél felülírja a konténer align-items értékét.
0 | -1 | 2
Átrendezi az elemet a forrás megváltoztatása nélkül.