CSS свойство order

Определяет порядок вывода флекс-элементов внутри флекс-контейнера. Элементы располагаются согласно значениям свойства order от меньшего к большему. При равных значениях order элементы выводятся в том порядке, в каком они появляются в исходном коде.

CSS синтаксис

order: число | initial | inherit;

Возможные значения

ЗначениеОписание
числоЦелое число, отвечающее за порядок отображения флекс-элементов. Допускается использовать отрицательные значения. Значение по умолчанию 0.
inheritЗначение наследуется от родительского элемента.
initialУстанавливает значение по умолчанию.

Пример использования

Устанавливаем порядок флекс-элементов


/* Код для Safari 6.1-8.0 */
div#myRedDIV {-webkit-order: 2;}
div#myBlueDIV {-webkit-order: 4;}
div#myGreenDIV {-webkit-order: 3;}
div#myPinkDIV {-webkit-order: 1;}

/* Стандартный синтаксис */
div#myRedDIV {order: 2;}
div#myBlueDIV {order: 4;}
div#myGreenDIV {order: 3;}
div#myPinkDIV {order: 1;}