order

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

Синтаксис

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

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

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

Посмотрите Используем 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 Box Layout Module
Определение 'order' в этой спецификации.
Кандидат в рекомендации Начальное определение

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

BCD tables only load in the browser

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