Заказ - CSS-хитрости

Anonim

Это orderсвойство является подсвойством модуля Flexible Box Layout.

По умолчанию элементы Flex отображаются в том же порядке, в каком они отображаются в исходном документе. orderСвойство может быть использовано для изменения этого порядка.

Синтаксис

order: .flex-item ( order: 2; )

Демо

Следующая демонстрация показывает, как порядок по умолчанию (1, 2, 3, 4, 5) был изменен путем установки свойства порядка для каждого элемента.

Посмотрите на эту ручку!

Поддержка браузера

  • (современный) означает последний синтаксис из спецификации (например 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).