Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Flexbox
Webdesign

Полное руководство по назначению  и изменению order во Flexbox

by
Difficulty:IntermediateLength:MediumLanguages:

Russian (Pусский) translation by Pembelight (you can also view the original English article)

Flexbox позволяет нам размещать флекс-элементы в любом порядке и направлении. Распределение порядка элементов с flexbox проще, чем с помощью float или CSS-сетки, даже если вы с этим не согласны.  Поскольку flexbox - это модель одномерного макета, в отличие от CSS-сетки, которая является двумерной, вам нужно обращать внимание только на одно направление.  W3C четко определелил правила, поэтому вам больше не придется иметь дело с float и clearfix.

В данном уроке вы узнаете, как использовать следующие свойства flexbox для расстановки элементов:

  • flex-direction
  • flex-wrap
  • flex-flow
  • order 

Расстановка  Vs. Перестановка элементов 

Обсуждая тему расстановки flexbox, мы должны прояснить разницу между расстановкой и перестановкой элементов. 

Что такое расстановка?

Когда мы настраиваем макет flexbox, сначала нужно определить исходный порядок, то есть мы должны решить, как позиционируются оси flex контейнера. Я подробно описал flexbox оси в своем уроке по выравниванию flexbox.

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

  1. слева направо
  2. справа налево
  3. сверху вниз
  4. снизу вверх
The cross axis is always perpendicular to the main axis
Поперечная ось всегда перпендикулярна к главной.

Мы устанавливаем главную ось с помощью свойства flex-direction, а затем решаем, как будут ужиматься flex элементы, используя свойство flex-wrap. Эти два свойства определяют, каким образом браузер разместит элементы в flex контейнере.

Так что же такое перестановка элементов?

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

Используя такие возможности flexbox, нам не приходится менять структуру HTML документа только ради его визуального отображения. Таким образом, скринридеры (и поисковые системы) считывают логически структурированный контент (например, боковая панель не имеет приоритета над основным контентом).

Свойство оrder для Flexbox

Порядок элементов во Flexbox происходит со свойствами flex-direction и flex-wrap: flex-direction указывает направление главной оси. Свойство  оrder может принимать следующие значения:

  1. row (по умолчанию) главной оси: слева направо
  2. row-reverse главной оси: справа налево
  3. column главной оси : сверху вниз
  4. column-reverse главной оси: снизу вверх

Flex-wrap определяет, расположены ли flex-элементы в один ряд или в несколько. Он также контролирует направление поперечной оси. Может иметь три значения:

  1. nowrap (по умолчанию) размещает flex-элементы в одну строку; поперечная ось стоит в положении по умолчанию
  2. wrap размещает  flex-элементы в несколько строк; поперечная ось стоит в положении по умолчанию
  3. wrap-reverse размещает  flex-элементы в несколько строк; поперечная ось в обратном порядке

Положение поперечной оси по умолчанию:

  • сверху вниз в случае row и row-reverse
  • слева направо в случае column и column-reverse

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

Пример шорткода

Мы используем простой код, чтобы увидеть, как работает flexbox расстановка элементов. В данном примере HTML состоит из нескольких элементов:

Элемент .container  div будет flex-контейнером, а div с классом .item будут flex-элементами. Мы будем использовать (почти) один и тот же CSS код во всех примерах, только поменяются свойства flex-direction и flex-wrap. Вот как выглядит наш CSS со значениями row и wrap:

Тот же пример в демонстрации на CodePen: 

Расстановка элементов с помощью Row и Column 

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

В подключенном ниже примере вы увидите, как макеты flex-direction: row и flex-direction: column взаимодействуют между собой с разными значениями свойства flex-wrap. Используйте выпадающие списки, чтобы увидеть их комбинации.

Как вы видите, когда flex-direction является row, flex-элементы располагаются горизонтально слева направо. Когда вместо wrap мы используем wrap-reverse, flexbox начинает выкладывать элементы снизу вверх, а не наоборот. Это происходит потому, что wrap-reverse меняет направление перпендикулярной оси.

Когда flex-direction это column, элементы располагаются вертикально сверху вниз. И когда мы используем wrap-reverse вместо wrap, flexbox начинает размещать элементы справа (теперь это начальная точка поперечной оси), а не слева.

Расстановка элементов с помощью row-reverse  и column-reverse 

Теперь давайте посмотрим на то, как flexbox размещает элементы, когда flex-direction - это row-reverse и column-reverse.

Как видно из демонстрации выше, в обоих случаях flexbox начинает выкладывать элементы, как и раньше, с начала по главной оси. Главная ось row-reverse проходит справа налево, поэтому flexbox начинает раскладывать элементы справа.  Кроме того, главная ось макета column-reverse проходит снизу вверх, поэтому элементы начинают размещаться снизу вверх flex контейнера.

Когда мы используем flex-wrap: wrap, flexbox начинает размещать элементы со свойством flex-direction: сверху row-reverse, и слева  column-reverse, так как они соответсвенно являются начальными точками поперечной оси.  

Когда мы меняем направление на flex-wrap: wrap-reverse, поперечная ось будет двигаться в противоположном направлении. Она будет размещать элементы при flex-direction снизу вверх row-reverse и справа налево при column-reverse.

Ускорьте процесс с помощью  flex-flow

Также значения flex-direction и flex-wrap могут применяться к одному классному CSS свойству. Оно называется flex-flow. Чтобы его использовать, нам нужно прописать эти два значения вместе, как это сделано ниже:

Перестановка элементов в Flexbox

Пришло время взглянуть на вещи немного по-другому.

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

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

В следующем примере .item-3 перемещается в начальную точку главной оси. Поскольку все элементы имеют значение по умолчанию 0, достаточно использовать правило order: -1, чтобы сделать его первым элементом в контейнере:

Вы заметили, что эту же логику можно использовать для перемещения .item-3 к концу главной оси. Для этого нам только нужно назначить положительное значение свойства order.

Конечно, мы можем переставить столько flex элементов, сколько пожелаем (хотя имейте в виду, что перестановка всех элементов, скорее всего, не самое грамотное решение).  Свойства order различных flex элементов  всегда расположены относительно друг к другу. Ниже вы увидете, как можно поменять порядок  нескольких элементов во flex контейнере.

Порядок и доступность

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

Такое поведение flexbox может пригодиться в некоторых случаях. Например, можно сделать так называемый «Макет Святого Грааля» доступным с помощью порядка во флексбоксе. Макет Святого Грааля - это популярный макет блога с хедером, футером и двумя боковыми сайдбарами: слева и справа от основного контента.

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

Flexbox & Writing Modes

Все сказанное в этом уроке относится к режиму записи LTR (left to right - слева направо). Оси Flexbox фактически следуют направлению письма документа, которое можно настроить с помощью свойств direction и writing-mode. Вот почему в режиме записи LTR главная ось движется слева направо, когда flex-direction является row. В режиме записи RTL (right to left - справа налево) он работает в противоположном направлении, справа налево, и все остальное меняется соответственно.

Это (Flex) Wrap!

Этот урок был второй частью из моей серии по flexbox. Обязательно прочитайте первую часть о выравнивании flexbox, чтобы узнать, как выровнять flex-элементы вдоль главной и поперечной оси.  Если вы хотите больше узнать о расстановке элементов во flexbox, MDN предлагает очень информативную статью на данную тему.

Узнайте больше

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.