flex-directionĪpašums ir sub-īpašums Elastīga Box Izkārtojums moduli.
Tas nosaka galveno asi, tādējādi nosakot virzienu, kad elastīgie priekšmeti tiek ievietoti elastīgajā traukā.
Atgādinājums: elastīgā konteinera galvenā ass ir galvenā ass, pa kuru tiek izlikti lokanie priekšmeti. Uzmanieties, tas nav obligāti horizontāls; tas ir atkarīgs no flex-directionīpašuma.
Naktsmītne flex-directionpieņem 4 dažādas vērtības:
row( noklusējums ): tāds pats kā teksta virziensrow-reverse: pretēji teksta virzienamcolumn: tāds pats kā,rowbet no augšas uz lejucolumn-reverse: tāds pats kā norow-reverseaugšas uz leju
Ņemiet vērā, ka row, un row-reversekas ietekmē directionality no flex konteinerā. Ja tā teksta virziens ir ltr, rowtas norāda horizontālo asi, kas orientēta no kreisās uz labo pusi un row-reverseno labās uz kreiso pusi; ja virziens ir rtlpretējs.
Sintakse
flex-direction: row | row-reverse | column | column-reverse .flex-container ( flex-direction: row; )Demonstrācija
Šajā demonstrācijā:
- Sarkanais saraksts ir iestatīts uz
row - Dzeltenais saraksts ir iestatīts uz
row-reverse - Zilais saraksts ir iestatīts uz
column - Zaļais saraksts ir iestatīts uz
column-reverse
Piezīme. Teksta virziens nav rediģēts.
Tātad būtībā jūs izmantosiet rowvairumā gadījumu vai columnnoteiktos apstākļos. Pretējā gadījumā ir diezgan neparasti mainīt virzienu secību.
Pārlūka atbalsts
- (mūsdienu) nozīmē neseno sintaksi no specifikācijas (piem.
display: flex;) - (hibrīds) ir nepāra neoficiāla sintakse no 2011. gada (piem.
display: flexbox;) - (vecs) nozīmē veco sintaksi no 2009. gada (piem.
display: box;)
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 21+ (mūsdienu) 20 - (vecs) | 3.1+ (vecs) | 2–21 (vecs) 22+ (jauns) | 12,1+ (mūsdienu) | 10+ (hibrīds) | 2.1+ (vecs) | 3,2+ (vecs) |
Blackberry pārlūks 10+ atbalsta jauno sintaksi.
Lai iegūtu papildinformāciju par sintakses sajaukšanu, lai iegūtu vislabāko pārlūka atbalstu, lūdzu, skatiet šo rakstu (CSS-Tricks) vai šo rakstu (DevOpera).