Это 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).