order

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

/* Числовые значения, в том числе отрицательные */
order: 5;
order: -5; 

/* Глобальные значения */
order: inherit;
order: initial;
order: unset;

Посмотрите Используем CSS flexible boxes для более подробной информации и дополнительных свойствах.

Синтаксис

Значения

<integer>

Представляет порядковую группу, которая присвоена flex элементу.

Формальный синтаксис

<integer>

Примеры

Имеется базовый отрывок HTML кода:

<header>...</header>
<div id='main'>
  <article>Article</article>
  <nav>Nav</nav>
  <aside>Aside</aside>
</div>
<footer>...</footer>

Следующий CSS код должен создать классический блок контента окруженный боковыми панелями. Flexible Box Layout Module автоматически создаёт блоки одинаковой высоты и максимально допустимой ширины.

#main { display: flex;  text-align:center; }
#main > article { flex:1;        order: 2; }
#main > nav     { width: 200px;  order: 1; }
#main > aside   { width: 200px;  order: 3; }

Результат

Спецификация

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

Смотрите также

• Используя CSS flexible boxes