Руководство по CSS

CSS @rules (РУКОВОДСТВА)

Полный список свойств CSS

Свойство outline в CSS Свойство opacity в CSS3

Метод использования и примеры свойства order CSS3

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

В таблице ниже приведено описание использования и истории версий этого свойства, а также синтаксис использования свойства в скриптах JavaScript.

Дефолтное значение:	0
Подходит для:	Элементы Flex и контейнеры FlexАбсолютная позицияпотомки
Инheritance:	Нет
Анимация возможна:	Да.См. также Анимационные свойства。
Версия:	Новые возможности CSS3
Синтаксис JavaScript:	объект.style.order="2"

Использование синтаксиса order

Грамматика этого свойства такая:

order:　integer　|　initial　|　inherit

Ниже приведен пример того, как использовать свойство order.

Пример

.flex-container　{
　　　　border:　2px　solid　#000;
　　　　display:　-webkit-flex;　/*　Safari　6.1+　*/
　　　　display:　flex;
}　
.item1　{
　　　　width:　100px;
　　　　background:　#ff80c0;
　　　　-webkit-order:　2;　/*　Safari　6.1+　*/
　　　　order:　2;
}
.item2　{
　　　　width:　100px;
　　　　background:　#8080ff;
　　　　-webkit-order:　1;　/*　Safari　6.1+　*/
　　　　order:　1;
}
.item3　{
　　　　width:　100px;
　　　　background:#0080ff;
}

Проверьте, как это работает‹/›

Значение свойства

В таблице описаны значения этого свойства.

Значение	Описание
integer	Определить порядок эластичного элемента. Значением по умолчанию является 0.
initial	Установить этот параметр в его значение по умолчанию.
inherit	Если указано, то связанный элемент принимает значение свойства order родительского элемента.

Совместимость браузеров

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

	Firefox 18+ ^-moz-，28+ Google Chrome 21+ ^-webkit-，29+ Internet Explorer 11+ Apple Safari 6.1+ ^-webkit- Opera 12.1+

Дополнительное чтение

Пожалуйста, обратитесь к следующим руководствам:Шрифты CSS，Единицы измерения CSS，CSS псевдоэлементы。

Связанные свойства: align-content, align-items, align-self, display, flex, flex-basis, flex-direction, flex-flow, flex-grow, flex-shrink, flex-wrap, justify-content, min-height, min-width, order.

Свойство outline в CSS Свойство opacity в CSS3