order

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

Исходный код этого интерактивного примера хранится в GitHub репозитории. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте https://github.com/mdn/interactive-examples и пришлите нам pull request.

Синтаксис

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

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

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

Значения

<integer>

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

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

<integer>

Примеры

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

<header>...</header>
<main>
  <article>Article</article>
  <nav>Nav</nav>
  <aside>Aside</aside>
</main>
<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