Flex-direction - CSS-трикове

Anonim

В flex-directionимота е под-собственост на модула гъвкави полета Разпределение на.

Той установява главната ос, като по този начин определя посоката на огъване на елементите, поставени в гъвкавия контейнер.

Напомняне: основната ос на гъвкавия контейнер е основната ос, по която са разположени гъвкавите елементи. Внимавайте, това не е непременно хоризонтално; зависи от flex-directionсобствеността.

В flex-directionимота приема 4 различни стойности:

  • row( по подразбиране ): същото като посоката на текста
  • row-reverse: противоположно на посоката на текста
  • column: същото като rowно отгоре надолу
  • column-reverse: същото като row-reverseотгоре надолу

Имайте предвид, че rowи row-reverseсе влияят от насочеността на гъвкавия контейнер. Ако посоката на текста му е ltr, rowпредставлява хоризонталната ос, ориентирана отляво надясно и row-reverseотдясно наляво; ако посоката е rtl, това е обратното.

Синтаксис

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

Демонстрация

В следната демонстрация:

  • Червеният списък е зададен на row
  • Жълтият списък е зададен на row-reverse
  • Синият списък е зададен на column
  • Зеленият списък е зададен на column-reverse

Забележка: Посоката на текста не е редактирана.

Вижте тази писалка!

Така че основно ще използвате rowв повечето случаи или columnпри определени обстоятелства. В противен случай е доста необичайно да се обърне посоката на посоката.

Поддръжка на браузър

  • (модерно) означава скорошния синтаксис от спецификацията (напр. display: flex;)
  • (хибрид) означава странен неофициален синтаксис от 2011 г. (напр. display: flexbox;)
  • (стар) означава стария синтаксис от 2009 г. (напр. display: box;)
Chrome Сафари Firefox Опера IE Android iOS
21+ (модерен)
20- (стар)		 3.1+ (стари) 2-21 (стар)
22+ (нов)		 12.1+ (модерен) 10+ (хибридни) 2.1+ (стари) 3.2+ (стари)

Браузърът Blackberry 10+ поддържа новия синтаксис.

За повече информация как да смесвате синтаксиси, за да получите най-добрата поддръжка на браузъра, моля, вижте тази статия (CSS-трикове) или тази статия (DevOpera).