Гибкое направление - 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;)
  • (old) означает старый синтаксис 2009 года (например display: box;)
Хром Сафари Fire Fox Опера IE Android iOS
21+ (современный)
20- (старый)		 3.1+ (старые версии) 2-21 (старые)
22+ (новые)		 12.1+ (современный) 10+ (гибрид) 2.1+ (старая версия) 3.2+ (старые)

Браузер Blackberry 10+ поддерживает новый синтаксис.

Для получения дополнительной информации о том, как смешивать синтаксисы, чтобы получить лучшую поддержку браузера, обратитесь к этой статье (CSS-Tricks) или этой статье (DevOpera).