CSS свойство order

Определение и применение

Свойство order задаёт визуальный порядок Flexbox- и Grid-элементов. Меньшие значения размещаются раньше; при равных значениях сохраняется порядок в документе. Порядок чтения и перехода клавишей Tab оно не меняет.

Схематичное отображение работы свойства order отображено на следующем изображении:

Схематичное отображение работы CSS свойства order

В генераторе Flexbox можно настроить контейнер и размеры его элементов и получить готовый CSS.

Выберите элемент и сравните его визуальный порядок в Grid с порядком элементов в HTML в генераторе Grid. Настройки можно проверить в превью и сохранить как HTML/CSS.

Попробуйте значения order

Меняется визуальный порядок оранжевого элемента. Порядок HTML и клавиатурной навигации не меняется.

Значение свойства

order: 0

HTML и CSS примера
HTML
<div class="stage">
  <div class="item">1</div>
  <div class="item demo-target">2</div>
  <div class="item">3</div>
</div>
CSS
* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 300px;
  height: 210px;
  padding: 10px;
  border: 2px dashed #607589;
  background: #edf2f5;
  color: #172c3d;
  font: 16px/1.4 system-ui;
}
.item {
  padding: 10px;
  border: 2px solid #245a85;
  background: #b9d7eb;
}
.stage {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.item {
  min-width: 0;
  width: 55px;
}
.demo-target {
  background: #ffe4bd;
  order: 0;
}

Поддержка браузерами

Спецификация: CSS display

Поддерживается во всех основных браузерах с 2015 года.

Показать браузеры
Совместимостьcss.properties.order
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
order✓29

Версия 29 выпущена в 2013 г.

Версия 21 выпущена в 2012 г. — Префикс -webkit-

✓12

Версия 12 выпущена в 2015 г.

Версия 12 выпущена в 2015 г. — Префикс -webkit-

✓20

Версия 20 выпущена в 2013 г.

Примечание MDN (англ.)

Since Firefox 28, multi-line flexbox is supported.

Версия 49 выпущена в 2016 г. — Префикс -webkit-

✓12.1✓9

Версия 9 выпущена в 2015 г.

Версия 7 выпущена в 2013 г. — Префикс -webkit-

✓29

Версия 29 выпущена в 2013 г.

Версия 25 выпущена в 2013 г. — Префикс -webkit-

✓20

Версия 20 выпущена в 2013 г.

Примечание MDN (англ.)

Since Firefox for Android 28, multi-line flexbox is supported.

Версия 49 выпущена в 2016 г. — Префикс -webkit-

✓12.1✓9

Версия 9 выпущена в 2015 г.

Версия 7 выпущена в 2013 г. — Префикс -webkit-

✓2.0

Версия 2.0 выпущена в 2014 г.

Версия 1.5 выпущена в 2013 г. — Префикс -webkit-

✓4.4

Версия 4.4 выпущена в 2013 г.

Версия 4.4 выпущена в 2013 г. — Префикс -webkit-

✓9

Версия 9 выпущена в 2015 г.

Версия 7 выпущена в 2013 г. — Префикс -webkit-

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

CSS синтаксис:

CSS
order: <integer>;

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

JavaScript синтаксис:

JavaScript
element.style.order = "3";

Начальное значение свойства

0.

Значения свойства

Значения order
Значение Описание
number Число, которое определяет порядок следования флекс элемента внутри контейнера относительно остальных элементов. Если вы указываете значение свойства order для одного флекс элемента в контейнере, то это не будет являться его порядковым номером, а указывает только на "вес" его позиции по отношению к другим элементам. Допускается применение отрицательных значений (значение -1, например, смещает элемент к левому краю родительского контейнера). Начальное значение.
Если флекс элементы отображаются вертикально как колонны (свойство flex-direction со значением column), то свойство order будет определять порядок следования элементов сверху вниз (элементы с меньшим номером будут отображаться выше, а с большим соответственно ниже).
Значения row-reverse и column-reverse свойства flex-direction изменяют порядок следования элементов в строках и колоннах на противоположный.
initial Устанавливает начальное значение свойства.
inherit Наследует вычисленное значение свойства у родительского элемента.
unset Для ненаследуемого свойства order устанавливает его начальное значение.
revert Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS.
revert-layer Сбрасывает значение свойства для текущего слоя каскада @layer. Применяется значение из другого слоя по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.

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

CSS Display — спецификация order.

Наследуется

Нет.

Анимируемое

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

Примеры, попробуйте сами

Порядок элементов через order

Измените order у выделенного элемента. Визуальный порядок изменится, но порядок в HTML останется прежним.

base.css
CSS
* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #172c3d;
}
section {
    margin-bottom: 24px;
    min-width: 0;
}
h3 {
    margin: 0 0 12px;
    font-size: 16px;
}
.item {
    padding: 8px;
    min-width: 0;
    background: #c5dbea;
    border: 1px solid #35658a;
    overflow-wrap: anywhere;
}

div > div {
    border: 1px solid orange;
}

.container div:nth-of-type(4) {
    background: Tan;
}

.container2 div:nth-of-type(4) {
    background: Tan;
}

.container3 div:nth-of-type(4) {
    background: Tan;
}
index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>Пример использования свойства order</title>
  </head>
  <body>
    <h3>order : -1;</h3>
    <div class="container">
      <div>A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
      <div>E</div>
    </div>
    <h3>order : 1;</h3>
    <div class="container2">
      <div>A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
      <div>E</div>
    </div>
    <h3>order : 2;</h3>
    <div class="container3">
      <div>A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
      <div>E</div>
    </div>
  </body>
</html>
style.css
CSS
.container,
.container2,
.container3 {
    display: flex;
}

div > div {
    width: 50px;
    height: 50px;
}

.container div:nth-of-type(4) {
    order: -1;
}

.container2 div:nth-of-type(4) {
    order: 1;
}

.container3 div:nth-of-type(4) {
    order: 2;
}