Lankstumo kryptis - CSS-gudrybės

Anonim

Ši flex-directionnuosavybė yra „Flexible Box Layout“ modulio sub-ypatybė.

Tai nustato pagrindinę ašį, taip apibrėžiant lankstumo elementus, kurie dedami į lankstų indą.

Priminimas: pagrindinė lankstaus konteinerio ašis yra pagrindinė ašis, išilgai kurios išdėstyti lankstūs daiktai. Saugokitės, jis nebūtinai yra horizontalus; tai priklauso nuo flex-directionturto.

flex-directionNuosavybė priima 4 skirtingų dydžių:

  • row( numatytasis ): tas pats, kas teksto kryptis
  • row-reverse: priešinga teksto krypčiai
  • column: tas pats, kas iš rowviršaus į apačią
  • column-reverse: tas pats, kas iš row-reverseviršaus į apačią

Atkreipkite dėmesį, kad rowir row-reverseveikia iki flex konteinerį kryptingumo. Jei jo teksto kryptis yra ltr, rowreiškia horizontalią ašį, nukreiptą iš kairės į dešinę ir row-reverseiš dešinės į kairę; jei kryptis yra rtlpriešinga.

Sintaksė

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

Demonstracija

Šioje demonstracijoje:

  • Raudonasis sąrašas nustatytas į row
  • Geltonasis sąrašas nustatytas į row-reverse
  • Mėlynas sąrašas nustatytas į column
  • Žaliasis sąrašas nustatytas į column-reverse

Pastaba: teksto kryptis nebuvo redaguota.

Patikrinkite šį rašiklį!

Taigi iš esmės naudosite rowdaugeliu atvejų arba columnesant tam tikroms aplinkybėms. Priešingu atveju yra gana neįprasta pakeisti kryptį.

Naršyklės palaikymas

  • (moderni) reiškia naujausią sintaksę iš specifikacijos (pvz. display: flex;)
  • (hibridas) reiškia nelyginę neoficialią sintaksę nuo 2011 m. (pvz. display: flexbox;)
  • (senas) reiškia seną sintaksę nuo 2009 m. (pvz. display: box;)
„Chrome“ „Safari“ „Firefox“ Opera T.Y „Android“ „iOS“
21+ (modernus)
20- (senas)		 3.1+ (senas) 2–21 (senas)
22+ (naujas)		 12.1+ (moderni) 10+ (hibridas) 2.1+ (senas) 3,2+ (senas)

„Blackberry“ naršyklė 10+ palaiko naują sintaksę.

Norėdami gauti daugiau informacijos apie tai, kaip maišyti sintakses, kad gautumėte geriausią naršyklės palaikymą, žr. Šį straipsnį (CSS-Tricks) arba šį straipsnį (DevOpera).