logo1

Порядок отображения flex-элементов: order

Свойство определяет порядок, в котором flex-элементы отображаются и располагаются внутри flex-контейнера. Применяется к flex-элементам. Свойство не наследуется.

Первоначально все flex-элементы имеют order: 0;. При указании значения от -1 для элемента он перемещается в начало сроки, значение 1 — в конец. Если несколько flex-элементов имеют одинаковое значение order, они будут отображаться в соответствии с исходным порядком.

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

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

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

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

клик для увеличения

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

Активное изучение

Для flex-элементов значение заказа по умолчанию равно 0, поэтому элементы с целочисленным значением больше 0 будут отображаться после любых элементов, для которых не было задано явное значение заказа. Вы также можете использовать отрицательные значения с порядком, который может быть весьма полезным. Если вы хотите, чтобы сначала отображался один элемент, и оставить порядок всех остальных элементов без изменений, вы можете присвоить этому элементу порядок -1. Поскольку это ниже 0, элемент всегда будет отображаться первым. В приведенном ниже примере у нас есть элементы, выложенные с помощью Flexbox. Изменяя, какой элемент имеет активный класс, назначенный ему в HTML, вы можете изменить, какой элемент отображается первым и, следовательно, становится на всю ширину в верхней части макета, а другие элементы отображаются под ним.

Активное изучение

Элементы отображаются как документы с измененным порядком, согласно таблице спецификации (CSS). Значение свойств элементов считываются до их отображения.