Flex-direction - Triky CSS

Anonim

Tato flex-directionvlastnost je dílčí vlastností modulu Flexibilní rozvržení krabice.

Stanoví hlavní osu, čímž definuje směr, ve kterém jsou flex položky umístěny do flex kontejneru.

Připomenutí: hlavní osa flex kontejneru je primární osa, podél které jsou rozloženy flex položky. Pozor, nemusí to být nutně horizontální; záleží na flex-directionmajetku.

Ubytovací zařízení flex-directionpřijímá 4 různé hodnoty:

  • row( výchozí ): stejné jako směr textu
  • row-reverse: proti směru textu
  • column: stejné jako, rowale shora dolů
  • column-reverse: stejné jako row-reverseshora dolů

Všimněte si, že rowa row-reversejsou ovlivněny směrovostí flex kontejneru. Pokud je jeho směr textu ltr, rowpředstavuje vodorovnou osu orientovanou zleva doprava a row-reversezprava doleva; pokud je směr rtl, je to naopak.

Syntax

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

Ukázka

V následující ukázce:

  • Červený seznam je nastaven na row
  • Žlutý seznam je nastaven na row-reverse
  • Modrý seznam je nastaven na column
  • Zelený seznam je nastaven na column-reverse

Poznámka: Směr textu nebyl upraven.

Podívejte se na toto pero!

V zásadě tedy použijete rowve většině případů nebo columnza určitých okolností. Jinak je zcela neobvyklé měnit pořadí v opačném směru.

Podpora prohlížeče

  • (moderní) znamená nedávnou syntaxi ze specifikace (např. display: flex;)
  • (hybrid) znamená lichou neoficiální syntaxi z roku 2011 (např. display: flexbox;)
  • (old) znamená starou syntaxi z roku 2009 (např. display: box;)
Chrome Safari Firefox Opera TJ 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ý)

Prohlížeč Blackberry 10+ podporuje novou syntaxi.

Další informace o tom, jak kombinovat syntaxe s cílem získat nejlepší podporu prohlížeče, najdete v tomto článku (CSS-Tricks) nebo v tomto článku (DevOpera).