Den flex-directionegenskapen er en under egenskap av Flexible Box Layout modul.
Den etablerer hovedaksen, og definerer dermed retningen flex-elementene plasseres i flex-beholderen.
Påminnelse: hovedaksen til en flexcontainer er den primære aksen som flex-elementene legges ut langs. Vokt dere, det er ikke nødvendigvis horisontalt; det avhenger av flex-directioneiendommen.
Den flex-directioneiendommen aksepterer 4 forskjellige verdier:
row( standard ): samme som tekstretningrow-reverse: motsatt tekstretningcolumn: samme somrowmen fra topp til bunncolumn-reverse: samme somrow-reversetopp til bunn
Merk at rowog row-reversepåvirkes av retningsbestemmelsen til flexbeholderen. Hvis dens tekstretning er ltr, rowrepresenterer den horisontale aksen orientert fra venstre til høyre og row-reversefra høyre til venstre; hvis retningen er rtl, er det motsatt.
Syntaks
flex-direction: row | row-reverse | column | column-reverse .flex-container ( flex-direction: row; )Demo
I følgende demo:
- Rød liste er satt til
row - Gul liste er satt til
row-reverse - Blå liste er satt til
column - Grønn liste er satt til
column-reverse
Merk: Tekstretningen er ikke redigert.
Så i utgangspunktet vil du bruke rowi de fleste tilfeller eller columnunder visse omstendigheter. Ellers er det ganske uvanlig å reversere retningsrekkefølgen.
Nettleserstøtte
- (moderne) betyr den nylige syntaksen fra spesifikasjonen (f.eks.
display: flex;) - (hybrid) betyr en merkelig uoffisiell syntaks fra 2011 (f.eks.
display: flexbox;) - (gammel) betyr den gamle syntaksen fra 2009 (f.eks.
display: box;)
| Chrome | Safari | Firefox | Opera | DVS | Android | iOS |
|---|---|---|---|---|---|---|
| 21+ (moderne) 20- (gammel) | 3.1+ (gammel) | 2-21 (gammel) 22+ (ny) | 12.1+ (moderne) | 10+ (hybrid) | 2.1+ (gammel) | 3.2+ (gammel) |
Blackberry browser 10+ støtter den nye syntaksen.
For mer informasjon om hvordan du blander syntakser for å få best nettleserstøtte, se denne artikkelen (CSS-Tricks) eller denne artikkelen (DevOpera).