W3docs
ru
Войти

Свойство CSS order

Use the order CSS property for specifying the order of an element inside a flexible container. See property values and try examples.

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

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

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

info

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

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

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

Начальное значение0
Применяется кГибким элементам и элементам сетки.
НаследуетсяНет.
АнимацияНет. Свойство order дискретно и не анимируется.
ВерсияCSS3
Синтаксис DOMObject.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 определяет порядок для элементов flex или grid. В соответствии с требованиями пользователя каждому элементу присваивается число.

Значения

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

Практика

Практика

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