Den flex-directionegenskab er en sub-egenskab af Flexible Box layout modul.
Den etablerer hovedaksen og definerer således retningen flex-emner placeres i flexbeholderen.
Påmindelse: hovedaksen i en flexcontainer er den primære akse, langs hvilken flex-emner er lagt. Pas på, det er ikke nødvendigvis vandret; det afhænger af flex-directionejendommen.
Den flex-directionejendom accepterer 4 forskellige værdier:
row( standard ): samme som tekstretningrow-reverse: modsat tekstretningcolumn: samme somrowmen top til bundcolumn-reverse: samme somrow-reversetop til bund
Bemærk, at rowog row-reversepåvirkes af retningsbestemmelsen af flexcontaineren. Hvis dens tekstretning er ltr, rowrepræsenterer den vandrette akse orienteret fra venstre mod højre og row-reversefra højre mod venstre; hvis retningen er rtl, er det det modsatte.
Syntaks
flex-direction: row | row-reverse | column | column-reverse .flex-container ( flex-direction: row; )Demo
I følgende demo:
- Rød liste er indstillet til
row - Den gule liste er indstillet til
row-reverse - Den blå liste er indstillet til
column - Grøn liste er indstillet til
column-reverse
Bemærk: Tekstretningen er ikke redigeret.
Så dybest set vil du bruge rowi de fleste tilfælde eller columnunder visse omstændigheder. Ellers er det ret ualmindeligt at vende retningsbestilling.
Browsersupport
- (moderne) betyder den nylige syntaks fra specifikationen (f.eks.
display: flex;) - (hybrid) betyder en ulige uofficiel syntaks fra 2011 (f.eks.
display: flexbox;) - (gammel) betyder den gamle syntaks fra 2009 (f.eks.
display: box;)
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 21+ (moderne) 20- (gamle) | 3.1+ (gammel) | 2-21 (gammel) 22+ (ny) | 12.1+ (moderne) | 10+ (hybrid) | 2.1+ (gammel) | 3.2+ (gammel) |
Blackberry browser 10+ understøtter den nye syntaks.
For mere information om, hvordan man blander syntakser for at få den bedste browsersupport, henvises til denne artikel (CSS-Tricks) eller denne artikel (DevOpera).