Порядок

В приведенном примере выберите опции в левой части, чтобы изменить значение свойства order розового блока. Светло-голубым блокам заданы фиксированные значения order.

Учитывайте влияние порядка исходного кода. Например, когда выбран order: 2;, розовая рамка размещается перед двумя синими блоками с order: 2;. Это происходит потому, что розовая рамка находится перед синими блоками в исходном коде.

/* <integer> values */
order: 5;
order: -5;

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

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

Определяемое в модуле CSS display, это свойство влияет только на элементы grid и flex. Когда order задано элементу, у которого родительское свойство display не создает контейнер flex или grid, свойство order не оказывает никакого влияния.

<integer>

Представляет порядковую группу, используемую элементом.

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

• Flexbox & the keyboard navigation disconnect от Tink (2016)
• Source Order Matters от Адриана Росселли (2015)
• Понимание WCAG, пояснения к руководству 1.3
• Понимание критерия успеха 1.3.2 | W3C Понимание WCAG 2.0

order = 
  <integer>  

В этом примере мы создаем классическую двухстороннюю компоновку.

HTML

Мы включаем заголовок, подвал и основную область содержимого. Основное содержимое включает статью и две боковые панели. Обратите внимание на их порядок! Мы будем использовать свойство CSS order для изменения их визуального порядка.

<header>Header</header>
<main>
  <article>Article</article>
  <nav>Nav</nav>
  <aside>Aside</aside>
</main>
<footer>Footer</footer>

CSS

Мы стилизуем основную область, используя возможности модуля гибкой компоновки; установив display в flex, элемент <main> становится контейнером flex. По умолчанию это создает элементы flex одинакового вертикального размера. У боковых панелей оба заданы абсолютные width, в то время как элемент <article> будет использовать все положительное свободное пространство с коэффициентом flex-grow, заданным через flex.

Затем мы задаем разные значения свойства order для каждого из трех дочерних элементов контейнера flex; это означает, что CSS определяет визуальный порядок компонента, а не его порядок, объявленный в HTML.

main {
  display: flex;
  text-align: center;
}
main > article {
  flex: 1;
  order: 2;
}
main > nav {
  width: 200px;
  order: 1;
}
main > aside {
  width: 200px;
  order: 3;
}

Результат

Элемент <article> появляется первым в порядке исходного кода, но визуально отображается посередине.

• Основные понятия flexbox
• Упорядочивание элементов flex
• CSS grid layout и доступность
• Модуль CSS display