W3docs
ru
Войти

CSS свойство order

Используйте CSS свойство order для задания порядка элемента внутри флекс-контейнера. Значения свойства и примеры использования.

Свойство order управляет позицией флекс-элемента или элемента CSS Grid вдоль его трека, позволяя изменять визуальный порядок элементов без изменения их порядка в HTML. Оно является частью модуля Flexible Box Layout и входит в число свойств CSS3.

По умолчанию каждый элемент имеет order: 0, поэтому элементы отображаются в порядке их расположения в источнике. Элементы выстраиваются в порядке возрастания значения order; элементы с одинаковым order сохраняют относительный порядок из источника. Это делает order полезным, например, для перемещения боковой панели перед основным содержимым на широких экранах или для изменения порядка карточек внутри макета Flexbox или CSS Grid, не затрагивая разметку.

Информация

order влияет только на прямых потомков флекс- или грид-контейнера. Если элемент не является флекс-элементом или элементом CSS Grid, order не имеет эффекта.

Как работают значения

order принимает любое целое число, включая отрицательные значения:

  • Элемент с меньшим order отображается первым; с большим order — последним.
  • Поскольку начальное значение равно 0, установка одному элементу значения -1 — это быстрый способ переместить его перед всеми остальными.
  • Элементы с одинаковым значением order упорядочиваются в соответствии с их порядком в DOM, поэтому обычно достаточно задать order лишь тем элементам, которые нужно переместить.
.first  { order: -1; } /* moves before all default (0) items */
.middle { order:  0; } /* default, can be omitted */
.last   { order:  1; } /* moves after all default items */

Проблемы доступности

order создаёт разрыв между визуальным отображением содержимого и его DOM-порядком. Визуальное изменение порядка не меняет DOM, поэтому не влияет на порядок чтения для программ чтения с экрана и порядок обхода клавишей Tab для пользователей клавиатуры. Человек, использующий Tab или программу чтения с экрана, будет следовать исходному порядку источника, а не переупорядоченному макету — что может сбивать с толку при значительном расхождении. Сохраняйте DOM в логическом порядке чтения и используйте order только для презентационных корректировок.

Начальное значение0
Применяется кФлекс-элементам и элементам CSS Grid.
НаследуетсяНет.
АнимируетсяНет. Свойство order является дискретным и не поддерживает анимацию.
ВерсияCSS3
DOM СинтаксисObject.style.order = "4";

Синтаксис

Синтаксис CSS order

order: number | initial | inherit;

Пример свойства order:

Пример кода CSS order

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #example {
        width: 400px;
        height: 200px;
        border: 1px solid #000;
        display: flex;
      }
      #example div {
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        color: #fff;
        font-size: 30px;
        font-family: sans-serif;
      }
      div#blue {
        order: 2;
      }
      div#green {
        order: 3;
      }
      div#grey {
        order: 1;
      }
      div#yellow {
        order: 4;
      }
    </style>
  </head>
  <body>
    <h2>Order property example</h2>
    <div id="example">
      <div style="background-color: #1c87c9;" id="blue">1</div>
      <div style="background-color: #8ebf42;" id="green">2</div>
      <div style="background-color: #666;" id="grey">3</div>
      <div style="background-color: #f4f442;" id="yellow">4</div>
    </div>
  </body>
</html>
Попробуйте сами »

Результат

Свойство order

Пример свойства order, применённого к классу контейнера:

Пример CSS order с Flexbox

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .container {
        padding: 0;
        margin: 0;
        list-style: none;
        display: flex;
        flex-flow: row wrap;
      }
      .box:nth-of-type(1) {
        order: 4;
      }
      .box:nth-of-type(2) {
        order: 1;
      }
      .box:nth-of-type(3) {
        order: 3;
      }
      .box:nth-of-type(4) {
        order: 5;
      }
      .box:nth-of-type(5) {
        order: 2;
      }
      .box {
        background: #1c87c9;
        padding: 5px;
        width: 100px;
        height: 100px;
        margin: 5px;
        line-height: 100px;
        color: #eee;
        font-weight: bold;
        font-size: 2em;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h2>Order property</h2>
    <ul class="container">
      <li class="box">1</li>
      <li class="box">2</li>
      <li class="box">3</li>
      <li class="box">4</li>
      <li class="box">5</li>
    </ul>
  </body>
</html>
Попробуйте сами »

В обоих примерах свойство order переупорядочивает элементы на экране, тогда как HTML остаётся в исходной последовательности — каждому элементу просто присваивается число, помещающее его на нужное место.

order — один из нескольких инструментов выравнивания Flexbox. Комбинируйте его с flex-direction для задания главной оси, justify-content для расстановки элементов вдоль этой оси и align-items для выравнивания по поперечной оси.

Значения

ЗначениеОписание
numberОпределяет порядок флекс- или грид-элемента в контейнере. Значение по умолчанию — 0.
initialУстанавливает свойство в его значение по умолчанию.
inheritНаследует свойство от родительского элемента.

Практика

Практика
Что делает CSS свойство 'order'?
Что делает CSS свойство 'order'?
Was this page helpful?