Определяет порядок вывода флекс-элементов внутри флекс-контейнера. Элементы располагаются согласно значениям свойства 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;}
