flex-directionVara on sub-vara Paindlik Box paigutus moodul.
Sellega luuakse põhitelg, määratledes nii paindeseadme suuna paindekonteinerisse.
Meeldetuletus: paindmahuti põhitelg on peamine telg, mida mööda painduvad elemendid asetatakse. Ettevaatust, see pole tingimata horisontaalne; see sõltub flex-directionvarast.
flex-directionVara aktsepteerib 4 erinevaid väärtusi:
row( vaikimisi ): sama mis teksti suundrow-reverse: vastupidine teksti suunalecolumn: sama misrowülalt allacolumn-reverse: sama misrow-reverseülalt alla
Pange tähele, et rowja row-reverseon mõjutatud suunatundlikkuse flex konteiner. Kui selle teksti suund on ltr, rowtähistab vasakult paremale ja row-reverseparemalt vasakule suunatud horisontaaltelge ; kui suund on rtl, on vastupidi.
Süntaks
flex-direction: row | row-reverse | column | column-reverse .flex-container ( flex-direction: row; )Demo
Järgmises demos:
- Punane nimekiri on seatud väärtusele
row - Kollane loend on seatud väärtusele
row-reverse - Sinine loend on seatud väärtusele
column - Roheline loend on seatud väärtusele
column-reverse
Märkus. Teksti suunda pole muudetud.
Nii et põhimõtteliselt kasutate rowseda enamikul juhtudel või columnteatud tingimustel. Muidu on üsna haruldane suunda vastupidises suunas muuta.
Brauseri tugi
- (kaasaegne) tähendab spetsifikatsiooni hiljutist süntaksit (nt
display: flex;) - (hübriid) - paaritu mitteametlik süntaks aastast 2011 (nt
display: flexbox;) - (vana) tähendab vana süntaksit aastast 2009 (nt
display: box;)
| Chrome | Safari | Firefox | Ooper | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 21+ (kaasaegne) 20 - (vana) | 3.1+ (vana) | 2–21 (vana) 22+ (uus) | 12,1+ (kaasaegne) | 10+ (hübriid) | 2.1+ (vana) | 3,2+ (vana) |
Blackberry brauser 10+ toetab uut süntaksit.
Lisateavet süntaksi segamise kohta, et saada parim brauseritugi, leiate sellest artiklist (CSS-trikid) või sellest artiklist (DevOpera).