Свойство CSS order

Свойство order используется для указания порядка расположения гибкого элемента внутри контейнера flex или grid.

Свойство order является частью модуля гибкой верстки (Flexible Box Layout).

Свойство order входит в число свойств CSS3.

INFO

Если элемент не является гибким элементом, свойство order не работает.

Вопросы доступности

Свойство order создает разрыв между визуальным отображением контента и порядком в DOM. Визуальная перестановка не изменяет порядок в DOM, что влияет на навигацию с помощью скринридеров. Пользователи, полагающиеся на вспомогательные технологии (например, скринридеры), будут воспринимать исходный порядок DOM, а не визуально перестроенную раскладку.

Начальное значение	0
Применяется к	Гибким элементам и элементам сетки.
Наследуется	Нет.
Анимация	Нет. Свойство `order` дискретно и не анимируется.
Версия	CSS3
Синтаксис DOM	Object.style.order = "4";

Синтаксис

Синтаксис CSS order

css

order: number | initial | inherit;

Пример использования свойства order:

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

html

<!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>

Try it Yourself »

Результат

Свойство order

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

Пример CSS order для flexbox

html

<!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>

Try it Yourself »

В приведенных выше примерах свойство order определяет порядок для элементов flex или grid. В соответствии с требованиями пользователя каждому элементу присваивается число.

Значения

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

Практика

Что делает CSS-свойство 'order'?

Оно используется для расположения flex-элементов вдоль главной оси.Оно позволяет элементу вести себя как блочный.Оно используется для указания вертикального выравнивания строчного или таблично-ячеечного блока.Оно задает порядок появления элемента внутри контейнера.

Свойство CSS order ​

Вопросы доступности ​

Синтаксис ​

Пример использования свойства order: ​

Результат ​

Пример применения свойства order к классу контейнера: ​

Значения ​

Практика ​