Flex-direction - Triky CSS

Anonim

Táto flex-directionvlastnosť je podvlastnosťou modulu Flexibilné usporiadanie schránky.

Stanovuje hlavnú os, čím definuje smer, kedy sú položky flex umiestnené do nádoby flex.

Pripomienka: hlavná os flex kontajnera je primárna os, pozdĺž ktorej sú rozložené flex predmety. Pozor, nemusí to byť nevyhnutne horizontálne; záleží na flex-directionmajetku.

Toto flex-directionubytovacie zariadenie akceptuje 4 rôzne hodnoty:

  • row( predvolené ): rovnaké ako smer textu
  • row-reverse: oproti smeru textu
  • column: rovnaké ako, rowale zhora nadol
  • column-reverse: rovnaké ako row-reversezhora nadol

Všimnite si, že rowa row-reversesú ovplyvnené smerovosťou flex kontajnera. Ak je smer jej textu ltr, rowpredstavuje vodorovnú os orientovanú zľava doprava a row-reversesprava doľava; ak je smer rtl, je to naopak.

Syntax

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

Ukážka

V nasledujúcej ukážke:

  • Červený zoznam je nastavený na row
  • Žltý zoznam je nastavený na row-reverse
  • Modrý zoznam je nastavený na column
  • Zelený zoznam je nastavený na column-reverse

Poznámka: Smer textu nebol upravený.

Vyskúšajte toto pero!

V zásade teda použijete rowvo väčšine prípadov alebo columnza určitých okolností. V opačnom prípade je pomerne neobvyklé obrátiť smer.

Podpora prehľadávača

  • (moderný) znamená nedávnu syntax zo špecifikácie (napr. display: flex;)
  • (hybrid) znamená zvláštnu neoficiálnu syntax z roku 2011 (napr. display: flexbox;)
  • (staré) znamená starú syntax z roku 2009 (napr. display: box;)
Chrome Safari Firefox Opera IE Android iOS
21+ (moderný)
20- (starý)		 3.1+ (staré) 2-21 (staré)
22+ (nové)		 12.1+ (moderný) 10+ (hybridný) 2.1+ (staré) 3.2+ (staré)

Prehliadač Blackberry 10+ podporuje novú syntax.

Viac informácií o tom, ako kombinovať syntaxe s cieľom získať najlepšiu podporu prehľadávača, nájdete v tomto článku (CSS-triky) alebo v tomto článku (DevOpera).