order

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.

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

Интерактивный пример

Синтаксис

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

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

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

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

Значения

<integer>

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

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

order = 
<integer>

Пример

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

html
<header>...</header>
<main>
  <article>Article</article>
  <nav>Nav</nav>
  <aside>Aside</aside>
</main>
<footer>...</footer>

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

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

Результат

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

Specification
CSS Display Module Level 3
# order-property

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

BCD tables only load in the browser

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