Hajlító irány - CSS-trükkök

Anonim

Az flex-directioningatlan a Flexible Box Layout modul egyik al-tulajdonsága.

Megállapítja a főtengelyt, így meghatározva az irányt, ahogyan a flex elemeket a flex tartályba helyezzük.

Emlékeztető: a hajlékony tartály fő tengelye az elsődleges tengely, amely mentén a hajlékony elemek el vannak helyezve. Vigyázat, nem feltétlenül vízszintes; vagyontól függ flex-direction.

A flex-directionszálláshely 4 különböző értéket fogad el:

  • row( alapértelmezett ): megegyezik a szöveg irányával
  • row-reverse: ellentétben a szöveg irányával
  • column: ugyanaz, mint rowfentről lefelé
  • column-reverse: ugyanaz, mint row-reversefentről lefelé

Megjegyezzük, hogy rowés row-reverseérinti a irányítottság a flex tartályba. Ha a szöveg iránya ltr, rowképviseli a vízszintes tengely orientált balról jobbra, és row-reversejobbról balra; ha az irány rtlaz ellenkezője.

Szintaxis

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

Demó

A következő bemutatóban:

  • A vörös lista értéke row
  • A sárga lista értéke row-reverse
  • A kék lista értéke column
  • A zöld lista értéke column-reverse

Megjegyzés: A szöveg irányát nem szerkesztették.

Nézze meg ezt a tollat!

Tehát alapvetően rowa legtöbb esetben, vagy columnbizonyos körülmények között használja. Ellenkező esetben elég ritka a fordított irányú sorrend.

Böngésző támogatás

  • (modern): a specifikáció legújabb szintaxisa (pl. display: flex;)
  • (hibrid) furcsa, nem hivatalos szintaxist jelent 2011-től (pl. display: flexbox;)
  • (régi) a 2009-es régi szintaxist jelenti (pl. display: box;)
Króm Szafari Firefox Opera AZAZ Android iOS
21+ (modern)
20 - (régi)		 3.1+ (régi) 2–21 (régi)
22+ (új)		 12,1+ (modern) 10+ (hibrid) 2.1+ (régi) 3,2+ (régi)

A Blackberry 10+ böngésző támogatja az új szintaxist.

A szintaxisok keverésével kapcsolatos további információkért a legjobb böngésző-támogatás érdekében olvassa el ezt a cikket (CSS-trükkök) vagy ezt a cikket (DevOpera).