Перейти к содержанию

order

Свойство order определяет порядок вывода флексов внутри флекс-контейнера.

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

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

Демо

Flexbox и выравнивание

Синтаксис

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
/* <integer> values */
order: 5;
order: -5;

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

Значения
Значение по-умолчанию 0
Наследуется нет
Применяется Элементы flex, элементы grid и абсолютно позиционированные дочерние элементы контейнеров flex и grid
Анимируется да

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

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

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

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

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

Примеры

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

Пример 1

1
2
3
4
5
6
7
<header>…</header>
<main>
    <article>Article</article>
    <nav>Nav</nav>
    <aside>Aside</aside>
</main>
<footer>…</footer>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
main {
    display: flex;
    text-align: center;
}
main > article {
    flex: 1;
    order: 2;
}
main > nav {
    width: 200px;
    order: 1;
}
main > aside {
    width: 200px;
    order: 3;
}

Пример 2

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>order</title>
    <style>
      .flex-container {
        padding: 0;
        margin: 0;
        list-style: none;
        display: flex;
        flex-flow: row wrap;
      }
      .flex-item {
        background: #69489d;
        color: white;
        padding: 20px 30px;
        margin: 5px;
        font-size: 2em;
      }
      .flex-item:nth-of-type(1) {
        order: 5;
      }
      .flex-item:nth-of-type(2) {
        order: 4;
      }
      .flex-item:nth-of-type(3) {
        order: 3;
      }
      .flex-item:nth-of-type(4) {
        order: 2;
      }
      .flex-item:nth-of-type(5) {
        order: 1;
      }
    </style>
  </head>
  <body>
    <ul class="flex-container">
      <li class="flex-item">1</li>
      <li class="flex-item">2</li>
      <li class="flex-item">3</li>
      <li class="flex-item">4</li>
      <li class="flex-item">5</li>
    </ul>
  </body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5

См. также

Комментарии