Порядок элементов flex

Свойство flex-direction может принимать одно из четырёх значений:

• row
• column
• row-reverse
• column-reverse

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

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

Помните, что начальная строка относится к режимам написания. Примеры выше, связанные со строками, демонстрируют, как row и row-reverse работают в языке с левосторонним письмом, например, английском. Если вы работаете с языком с правосторонним письмом, например, арабским, то row начнётся справа, row-reverse — слева.

Это может показаться простым способом отображения элементов в обратном порядке. Однако следует помнить, что элементы отображаются только визуально в обратном порядке. Возможности переупорядочения в flex-разметке влияют только на визуальное отображение. Порядок табуляции и порядок речи следуют порядку исходного кода. Это означает, что меняется только визуальное представление; исходный порядок сохраняется, что создаёт другой пользовательский опыт для UA, не использующих CSS (например, Siri или Alexa), и для пользователей вспомогательных технологий. Если вы изменяете порядок навигационной панели, порядок табуляции всё равно соответствует порядку исходного кода документа, а не визуальному порядку, что может быть когнитивно непонятным.

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

Спецификация гибкой компоновки предупреждает нас о том, что не следует использовать переупорядочение как способ исправления проблем с исходным кодом:

"Авторы не должны использовать значения order или *-reverse свойств flex-flow/flex-direction в качестве замены правильного порядка исходного кода, так как это может навредить доступности документа."

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

<div class="box">
  <div><a href="#">One</a></div>
  <div><a href="#">Two</a></div>
  <div><a href="#">Three</a></div>
</div>

.box > * {
  border: 2px solid rgb(96 139 168);
  border-radius: 5px;
  background-color: rgb(96 139 168 / 0.2);
  padding: 10px;
}

.box > * a:focus {
  background-color: yellow;
  color: black;
}

.box {
  border: 2px dotted rgb(96 139 168);
  display: flex;
  flex-direction: row-reverse;
}

Так же, как изменение значения flex-direction не изменяет порядок табуляции, это изменение не изменяет порядок отрисовки. Это только визуальное обращение элементов.

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

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

Например, пяти элементам flex присваиваются значения order следующим образом:

• Элемент исходного кода 1: order: 2
• Элемент исходного кода 2: order: 3
• Элемент исходного кода 3: order: 1
• Элемент исходного кода 4: order: 3
• Элемент исходного кода 5: order: 1

Эти элементы отображались бы на странице в следующем порядке:

• Элемент исходного кода 3: order: 1
• Элемент исходного кода 5: order: 1
• Элемент исходного кода 1: order: 2
• Элемент исходного кода 2: order: 3
• Элемент исходного кода 4: order: 3

Поэкспериментируйте со значениями в примере ниже и посмотрите, как это изменит порядок. Также попробуйте изменить flex-direction на row-reverse и посмотрите, что произойдёт — начальная строка будет переключена, поэтому порядок выстраивания начнётся с противоположной стороны.

<div class="box">
  <div><a href="#">1</a></div>
  <div><a href="#">2</a></div>
  <div><a href="#">3</a></div>
  <div><a href="#">4</a></div>
  <div><a href="#">5</a></div>
</div>

.box > * {
  border: 2px solid rgb(96 139 168);
  border-radius: 5px;
  background-color: rgb(96 139 168 / 0.2);
  padding: 10px;
}

.box {
  border: 2px dotted rgb(96 139 168);
  display: flex;
  flex-direction: row;
}
.box :nth-child(1) {
  order: 2;
}
.box :nth-child(2) {
  order: 3;
}
.box :nth-child(3) {
  order: 1;
}
.box :nth-child(4) {
  order: 3;
}
.box :nth-child(5) {
  order: 1;
}

У элементов flex есть значение order по умолчанию 0. Таким образом, элементы с целым значением больше 0 будут отображаться после любого элемента, которому не было задано явное значение order.

Вы также можете использовать отрицательные значения с order, что может быть очень полезно. Если вы хотите, чтобы один элемент отображался первым, а порядок всех остальных элементов остался неизменным, вы можете присвоить этому элементу порядок -1. Поскольку это значение меньше 0, элемент всегда будет отображаться первым.

В примере кода ниже элементы выстраиваются с помощью flexbox. Изменяя элемент, которому в HTML присвоена класс active, вы можете изменить элемент, который отображается первым, и, следовательно, он займёт всю ширину вверху макета, а остальные элементы будут отображаться ниже него.

<div class="box">
  <div><a href="#">1</a></div>
  <div><a href="#">2</a></div>
  <div class="active"><a href="#">3</a></div>
  <div><a href="#">4</a></div>
  <div><a href="#">5</a></div>
</div>

* {
  box-sizing: border-box;
}

.box > * {
  border: 2px solid rgb(96 139 168);
  border-radius: 5px;
  background-color: rgb(96 139 168 / 0.2);
  padding: 10px;
}

.box {
  width: 500px;
  border: 2px dotted rgb(96 139 168);
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

.active {
  order: -1;
  flex: 1 0 100%;
}

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

Order также изменяет порядок отрисовки элементов; элементы с меньшим значением для order рисуются первыми, а элементы с большим значением для order рисуются позже.

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

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

• Разрыв между flexbox и навигацией по клавиатуре через tink.uk (2016)
• Порядок исходного кода HTML против порядка отображения CSS через adrianroselli.com (2015)
• Конфликт порядка адаптивного отображения для фокуса клавиатуры через alastairc.uk (2017)

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

У вас может быть дизайн, возможно, карточка, отображающая новостную статью. Заголовок новостной статьи — ключевой элемент, на который пользователь может перейти, если он будет переключаться между заголовками, чтобы найти нужное содержимое. Карточка также содержит дату; конечный дизайн, который мы хотим создать, выглядит примерно так.

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

Карточка — это наш контейнер flex, с flex-direction установленным в column. Мы задаём дате order значение -1, размещая её выше заголовка.

<div class="wrapper">
  <div class="card">
    <h3>News item title</h3>
    <div class="date">1 Nov 2017</div>
    <p>This is the content of my news item. Very newsworthy.</p>
  </div>
  <div class="card">
    <h3>Another title</h3>
    <div class="date">6 Nov 2017</div>
    <p>This is the content of my news item. Very newsworthy.</p>
  </div>
</div>

body {
  font-family: sans-serif;
}

.wrapper {
  display: flex;
  flex: 1 1 200px;
  gap: 1em;
}

.card {
  border: 2px solid rgb(96 139 168);
  border-radius: 5px;
  background-color: rgb(96 139 168 / 0.2);
  padding: 1em;
  display: flex;
  flex-direction: column;
}

.date {
  order: -1;
  text-align: right;
}

Эти небольшие изменения — это те случаи, когда свойство order имеет смысл. Сохраняйте логический порядок таким же, как порядок чтения и табуляции документа, и поддерживайте его наиболее доступным и структурированным способом. Затем используйте order для чисто визуальных корректировок дизайна. Не переупорядочивайте элементы, на которые попадает фокус клавиатуры. Всегда тестируйте своё содержимое, используя только клавиатуру, а не мышь или сенсорный экран; это покажет, делают ли ваши решения разработку содержимого более сложной для навигации.

• Основные понятия гибкой компоновки
• Связь гибкой компоновки с другими методами компоновки
• Выравнивание элементов в контейнере гибкой компоновки
• Управление соотношениями элементов гибкой компоновки вдоль основной оси
• Освоение обёртки элементов гибкой компоновки
• Типичные варианты использования гибкой компоновки
• Модуль CSS гибкой компоновки