Flex-riktning - CSS-tricks | CSS Almanack 2025

Den flex-directionegenskapen är en sub-egenskap hos den flexibla Box Layout modul.

Den fastställer huvudaxeln och definierar därmed riktningen flexobjekt placeras i flexbehållaren.

Påminnelse: en flexcontainers huvudaxel är den primära axeln längs vilken flexartiklar läggs ut. Akta dig, det är inte nödvändigtvis horisontellt; det beror på flex-directionfastigheten.

Den flex-directionfastighet accepterar 4 olika värden:

row( standard ): samma som textriktning
row-reverse: motsatt textriktning
column: samma som rowmen uppifrån och ned
column-reverse: samma som row-reversetopp till botten

Notera att rowoch row-reversepåverkas av flexbehållarens riktning. Om dess textriktning är ltr, rowrepresenterar den horisontella axeln orienterad från vänster till höger och row-reversefrån höger till vänster; om riktningen är rtlär det motsatt.

Syntax

flex-direction: row | row-reverse | column | column-reverse .flex-container ( flex-direction: row; )

Demo

I följande demo:

Röd lista är inställd på row
Den gula listan är inställd på row-reverse
Blå lista är inställd på column
Grön lista är inställd på column-reverse

Obs! Textriktningen har inte redigerats.

Kolla in den här pennan!

Så i princip kommer du att använda rowi de flesta fall eller columnunder vissa omständigheter. Annars är det ganska ovanligt att ändra riktningsordning.

Webbläsarstöd

(modern) betyder den senaste syntaxen från specifikationen (t.ex. display: flex;)
(hybrid) betyder en udda inofficiell syntax från 2011 (t.ex. display: flexbox;)
(gammal) betyder den gamla syntaxen från 2009 (t.ex. display: box;)