Joustava suunta - CSS-temppuja | CSS-almanakka 2025

flex-directionOminaisuus on osa-ominaisuus Flexible Box Asettelu moduuli.

Se muodostaa pääakselin ja määrittelee siten joustavien esineiden suunnan joustosäiliöön.

Muistutus: joustavan säiliön pääakseli on pääakseli, jota pitkin joustavat esineet asetetaan. Varo, se ei ole välttämättä vaakasuora; se riippuu flex-directionomaisuudesta.

flex-directionOmaisuuden hyväksyy 4 eri arvoja:

row( oletus ): sama kuin tekstin suunta
row-reverse: vastakkainen tekstin suuntaan
column: sama kuin rowmutta ylhäältä alas
column-reverse: sama kuin row-reverseylhäältä alas

Huomaa, että rowja row-reversevaikuttaa suuntaisuudessa flex astiaan. Jos tekstin suunta on ltr, rowedustaa vaaka-akselia, joka on suunnattu vasemmalta oikealle ja row-reverseoikealta vasemmalle; jos suunta on rtl, se on päinvastainen.

Syntaksi

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

Demo

Seuraavassa esittelyssä:

Punainen luettelo on asetettu row
Keltainen luettelo on asetettu row-reverse
Sininen luettelo on asetettu column
Vihreän luettelon arvo on column-reverse

Huomaa: Tekstin suuntaa ei ole muokattu.

Katso tämä kynä!

Joten periaatteessa käytät rowuseimmissa tapauksissa tai columntietyissä olosuhteissa. Muuten on melko harvinaista kääntää suunnan suunta.

Selaimen tuki

(moderni) tarkoittaa viimeisintä syntaksia spesifikaatiosta (esim. display: flex;)
(hybridi) tarkoittaa outoa epävirallista syntaksia vuodelta 2011 (esim. display: flexbox;)
(vanha) tarkoittaa vanhaa syntaksia vuodelta 2009 (esim. display: box;)