Свойство CSS `order`

Свойство order CSS задаёт порядок размещения элемента во flex- или grid-контейнере. Элементы в контейнере сортируются по возрастанию значения order, а затем в порядке их расположения в исходном коде. Элементам, для которых явно не задано значение order, присваивается значение по умолчанию 0.

Попробуйте

order: 0;

order: 3;

order: -1;

order: 2;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">Box 1:</div>
  <div style="order: 1">Box 2: <code>order: 1;</code></div>
  <div style="order: 2">Box 3: <code>order: 2;</code></div>
  <div style="order: 2">Box 4: <code>order: 2;</code></div>
  <div style="order: 3">Box 5: <code>order: 3;</code></div>
</section>

.default-example {
  max-height: 300px;
  display: flex;
  flex-flow: column;
}

.default-example > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
  margin: 0.5rem;
  padding: 0.5rem;
  flex: 1;
}

#example-element {
  background-color: rgb(255 0 200 / 0.2);
  border: 3px solid rebeccapurple;
}

#example-element::after {
  content: attr(style);
  outline: 2px dashed;
  font-family: monospace;
}

В демонстрации выше выберите параметры слева, чтобы изменить значение свойства order розового блока. Для светло-голубых блоков заданы фиксированные значения order.

Помните о влиянии порядка элементов в исходном коде. Например, когда выбран параметр order: 2;, розовый блок располагается перед двумя синими блоками со значением order: 2;. Это происходит потому, что розовый блок находится в исходном коде перед синими блоками.

Синтаксис

/* <integer> values */
order: 5;
order: -5;

/* Global values */
order: inherit;
order: initial;
order: revert;
order: revert-layer;
order: unset;

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

Это свойство определено в модуле CSS display и влияет только на элементы сетки и flex-элементы. Если для элемента задано order, но свойство display его родителя не создаёт flex- или grid-контейнер, это свойство не оказывает никакого эффекта.

Значения

<integer>

Обозначает порядковую группу, используемую для элемента.

Доступность

Использование свойства order приводит к несоответствию между визуальным представлением содержимого и порядком элементов в DOM. Это негативно скажется на пользователях со слабым зрением, которые используют вспомогательные технологии, например программы чтения с экрана. Если визуальный порядок отличается от порядка в DOM, взаимодействие пользователей с содержимым будет различаться в зависимости от способа доступа к нему.

• Flexbox и нарушение порядка навигации с клавиатуры — Tink (2016)
• Порядок элементов в исходном коде имеет значение — Adrian Roselli (2015)
• Пояснения к руководству 1.3 WCAG

• [Понимание критерия успеха 1.3.2

  Руководство W3C по WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-sequence.html)

Формальное определение

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

order = 
  <integer>

<integer> = 
  <number-token>

Примеры

Упорядочивание элементов во flex-контейнере

В этом примере мы создадим классический макет с двумя боковыми панелями.

HTML

Добавим заголовок, нижний колонтитул и основную область содержимого. Основная область включает статью и две боковые панели. Обратите внимание на их порядок! Мы изменим визуальный порядок с помощью свойства CSS order.

<header>Header</header>
<main>
  <article>Article</article>
  <nav>Nav</nav>
  <aside>Aside</aside>
</main>
<footer>Footer</footer>

CSS

Для оформления основной области мы используем возможности модуля гибкой блочной раскладки; задав для свойства display значение flex, мы превратим элемент <main> во flex-контейнер. По умолчанию это создаёт flex-элементы одинаковой высоты. Для обеих боковых панелей задаётся абсолютная width, а элемент <article> займёт всё положительное свободное пространство благодаря коэффициенту flex-grow, заданному с помощью сокращённого свойства flex.

Затем мы задаём разные значения свойства order для каждого из трёх дочерних элементов flex-контейнера; таким образом, визуальный порядок компонентов задаётся в CSS, а не определяется порядком их объявления в HTML.

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

Результат

Элемент <article> первым идёт в исходном коде, но визуально отображается в центре.

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

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

См. также

• Основные понятия flexbox
• Упорядочивание flex-элементов
• CSS Grid Layout и доступность
• Модуль CSS display
• Порядок чтения