Flex-direction - CSS-trikovi

Anonim

flex-directionNekretnina je pod-vlasništvo Fleksibilna Box Izgled modula.

Utvrđuje glavnu os, definirajući tako smjer savijanja predmeta koji se postavljaju u spremnik za savijanje.

Podsjetnik: glavna os fleksibilnog spremnika je primarna os duž koje su položeni elementi savijanja. Pazite, nije nužno vodoravno; to ovisi o flex-directionsvojstvu.

flex-directionNekretnine prihvaća 4 različite vrijednosti:

  • row( zadano ): isto kao smjer teksta
  • row-reverse: suprotno smjeru teksta
  • column: isto kao i od rowvrha do dna
  • column-reverse: isto kao row-reverseodozgo prema dolje

Imajte na umu da rowi row-reverseutječe na usmjerenost na flex spremnika. Ako je njegov smjer teksta ltr, rowpredstavlja vodoravnu os usmjerenu slijeva udesno i row-reversezdesna ulijevo; ako je smjer rtlsuprotan.

Sintaksa

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

Demo

U sljedećem pokaznom prikazu:

  • Crveni popis je postavljen na row
  • Žuti je popis postavljen na row-reverse
  • Plavi popis postavljen je na column
  • Zeleni popis postavljen je na column-reverse

Napomena: Smjer teksta nije uređen.

Pogledajte ovu olovku!

U osnovi, koristit ćete rowu većini slučajeva ili columnpod određenim okolnostima. Inače je prilično neobično mijenjati redoslijed smjera.

Podrška preglednika

  • (moderno) znači nedavnu sintaksu iz specifikacije (npr. display: flex;)
  • (hibrid) znači neobičnu neslužbenu sintaksu iz 2011. (npr. display: flexbox;)
  • (stara) znači stara sintaksa iz 2009. (npr. display: box;)
Krom Safari Firefox Opera IE Android iOS
21+ (moderno)
20- (staro)		 3,1+ (staro) 2-21 (stari)
22+ (novi)		 12,1+ (moderno) 10+ (hibridno) 2,1+ (staro) 3,2+ (staro)

Preglednik Blackberry 10+ podržava novu sintaksu.

Za više informacija o tome kako miješati sintakse kako biste dobili najbolju podršku za preglednik, pogledajte ovaj članak (CSS-trikovi) ili ovaj članak (DevOpera).