Flex-direction - CSS-хитрощі

Anonim

flex-directionВластивість є суб-властивість модуля Flexible Box Layout.

Він встановлює головну вісь, таким чином визначаючи напрямок гнучких елементів, розміщених у гнучкому контейнері.

Нагадування: головна вісь гнучкого контейнера - це основна вісь, уздовж якої викладаються гнучкі предмети. Остерігайтеся, це не обов'язково горизонтально; це залежить від 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).