Smer upogibanja - CSS-triki

Anonim

flex-directionLastnost je sub-lastnost modula Fleksibilna Box postavitve.

Vzpostavi glavno os, s čimer določi smer upogibnih elementov, ki so postavljeni v upogibni vsebnik.

Opomnik: glavna os fleksibilnega vsebnika je primarna os, vzdolž katere so položeni fleksibilni predmeti. Pazite, ni nujno vodoravno; odvisno od flex-directionlastnine.

flex-directionLastnost sprejme 4 različne vrednosti:

  • row( privzeto ): enako kot smer besedila
  • row-reverse: nasproti smeri besedila
  • column: enako kot rowzgoraj navzdol
  • column-reverse: enako kot od row-reversezgoraj navzdol

Upoštevajte, da rowin row-reversevpliva na usmerjenost v flex posode. Če je njegova smer besedila ltr, rowpredstavlja vodoravno os, usmerjeno od leve proti desni in row-reverseod desne proti levi; če je smer rtlnasprotna.

Sintaksa

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

Demo

V tej predstavitvi:

  • Rdeči seznam je nastavljen na row
  • Rumeni seznam je nastavljen na row-reverse
  • Modri ​​seznam je nastavljen na column
  • Zeleni seznam je nastavljen na column-reverse

Opomba: Smer besedila ni bila urejena.

Oglejte si to pisalo!

V bistvu boste uporabili rowv večini primerov ali columnv določenih okoliščinah. V nasprotnem primeru je redko spreminjati vrstni red.

Podpora za brskalnik

  • (moderno) pomeni nedavno sintakso iz specifikacije (npr. display: flex;)
  • (hibrid) pomeni nenavadno neuradno skladnjo iz leta 2011 (npr. display: flexbox;)
  • (staro) pomeni staro skladnjo iz leta 2009 (npr. display: box;)
Chrome Safari Firefox Opera IE Android iOS
21+ (moderno)
20- (staro)		 3,1+ (staro) 2–21 (stari)
22+ (novi)		 12,1+ (moderno) 10+ (hibrid) 2,1+ (staro) 3,2+ (staro)

Brskalnik Blackberry 10+ podpira novo sintakso.

Za več informacij o tem, kako mešati sintakse, da dobite najboljšo podporo za brskalnik, si oglejte ta članek (CSS-triki) ali ta članek (DevOpera).