order | CSS | WebReference
- Содержание
- Краткая информация
- Синтаксис
- Значения
- Пример
- Примечание
- Спецификация
- Браузеры
Определяет порядок вывода флексов внутри флекс-контейнера. Элементы располагаются согласно значениям свойства order от меньшего к большему. При равных значениях order элементы выводятся в том порядке, в каком они появляются в исходном коде.
| Значение по умолчанию | 0 |
|---|---|
| Наследуется | Нет |
| Применяется | К флекс-элементам |
| Анимируется | Да |
Синтаксис
order: <число>
Обозначения
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,<время>]* |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
Значения
В качестве значения принимается любое целое число, включая отрицательные числа и ноль.
Пример
<!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> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </body> </html>
1.Рис. 1. Порядок вывода элементов через свойство order
Примечание
Safari до версии 9 поддерживает свойство -webkit-order.
Спецификация
| Спецификация | Статус |
|---|---|
| CSS Flexible Box Layout Module Level 1 | Возможная рекомендация |
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
| 11 | 13 | 29 | 12.1 | 6.1 | 9 | 28 |
| 4.4 | 28 | 12.1 | 7.1 | 9.2 |
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
Флексы
См. также
- Свойства flex-элементов
- Создание медиа-объектов
- Точки между слов
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 24.04.2020
Редакторы: Влад Мержевич
Как использовать свойство order во флексбоксах, не вызывая хаоса — CSS-LIVE
Перевод статьи Avoiding chaos when using Flexbox ‘order’ для css-live.ru, с разрешения автора — Амелии Беллами-Ройдз
Недавняя твиттерная суматоха вынудила меня сделать наконец демо с флексбоксами, которое я хотела создать еще с тех пор, как впервые начала экспериментировать с flex-свойствами CSS.
Рома Комаров поделился исследованием, как с помощью флексбоксов и CSS-свойства order получить эффект сортировки таблицы на чистом CSS. Другие CSS-эксперты тотчас выступили с предупреждением, что такой подход не рекомендуется, а то и вовсе прямо противоречит спецификации.
Рома принял критику и добавил в статью предостережение: это лишь эксперимент, не пытайтесь повторить это в продакшне! Но в твиттерном обсуждении люди задавали вопрос, всплывающий снова и снова:
Для чего же тогда вообще свойство ‘order’? Если его применение — это случай, когда «визуальный порядок отличается от исходного», то почему это условие не может выполняться и при других способах вывода?
Сет Роби (@TALlama), твит 16 февраля 2018
Для начала давайте рассмотрим, как не надо использовать order, и почему.
Спецификация флексбоксов предупреждает:
Авторы должны использовать
orderтолько для визуального, а не логического, переупорядочивания контента. Стили, использующиеorderради логического переупорядочивания, нарушают стандарт.
Для CSS-спецификаций крайне нехарактерны такие явные запреты для авторов.
Большинство тамошних «должны» адресовано разработчикам браузеров. Так что раз они, образно говоря, требуют предъявлять специальный ордер на использование свойства order — это дело серьезное. Пользователи клавиатуры и скринридеров полагаются на предсказуемый порядок элементов в DOM, и если такие пользователи видят экран, то им важно, чтобы этот порядок соответствовал наглядному логическому порядку элементов.
Да, верстка колонок на флоатах тоже позволяла (а то и вынуждала) использовать в коде другой порядок, не совпадающий с визуальным. Но ведь как раз поэтому мы и стремимся уйти от верстки на флоатах! Флексбоксы и CSS-гриды призваны упростить использование логичной структуры в разметке — а вовсе не помогать делать вид, что структура разметки не имеет значения.
Чтобы переупорядочить DOM, меняйте элементы местами с помощью DOM-методов, а не CSS-методов, влияющих только на визуальную раскладку.
Так почему же order существует? Зачем свойство order в CSS, если CSS не предназначен для переупорядочивания контента?
Потому что иногда логический порядок макета нельзя описать одним из вариантов обычного потока элементов во флексбоксах: слева направо, справа налево, сверху вниз или снизу вверх.
order — как раз для таких случаев: создать визуальный порядок, соответствующий логическому именно для вашего конкретного дизайна.Или как более изящно выразилась редактор спецификации флексбоксов Элика Этемад (известная как fantasai):
Зрительное восприятие не подчиняется порядку в системе координат. На него влияют принципы гештальта (целостного образа — прим. перев.) и т.п., и в нем бывает одновременность, которой речь, например, передать не может. Так что мы упорядочиваем исходник по порядку чтения, а визуальной раскладке даем больше свободы в размещении элементов.
fantasai (@fantasai), твит 16 февраля 2018
Олимпийский пьедестал почета — мой любимый пример необычного порядка в раскладке, который, тем не менее, понятен всем. Именно это демо я намечала себе целых два года (и надо же, какая удача, что у меня наконец дошли руки до него как раз во время олимпиады!).
See the Pen Using the flexbox order property, properly by Amelia Bellamy-Royds (@AmeliaBR) on CodePen.
Очередность призовых мест передает высота элементов — и структура пьедестала, знакомая каждому с детства — а не порядок чтения слева направо. Порядок в коде соответствует логическим 1, 2 и 3 местам, а свойство order создает правильную наглядную раскладку.
Я использовала похожий порядок «сначала центр» для навигации на сайте в поддержку моей книги «Использование SVG». В «шапке» там у меня три навигационных ссылки:
- Список глав
- Предыдущая глава
- Следующая глава
Если записать это как один список, то логический порядок именно такой. Но в верстке логично, чтобы «предыдущая» ссылка была с краю слева, «следующая» — с краю справа, а ссылка на оглавление — между ними. Флексбоксами я могу добиться этого без возни с флоатами и лишними дивами-обертками.
Улучшенный порядок на этом сайте включается по медиавыражению min-width. На более узких экранах ссылка на оглавление занимает всю первую строку раскладки на флексбоксах, а ссылки «следующая» и «предыдущая» переносятся на отдельную строку (или даже на две строки, если экран очень узкий по отношению к размеру шрифта).
Аналогично, в примере с пьедесталом у меня есть медиавыражение max-width, чтобы убрать свойство order на узких экранах (наряду с другими мелкими правками стилей) и восстановить обычный порядок списка для одноколоночной раскладки.
P.S. Это тоже может быть интересно:
- Голограммы, пленочные засветки и шейдеры на чистом CSS
- Не боритесь с каскадом, управляйте им!
- 6 первых публичных черновиков новых модулей CSS, которыми вы, возможно, давно пользуетесь
Заказ гибких элементов — CSS: Каскадные таблицы стилей
Новые методы компоновки, такие как Flexbox и Grid, дают возможность управлять порядком содержимого. В этой статье мы рассмотрим способы изменения визуального порядка вашего контента при использовании Flexbox. Мы также рассмотрим последствия изменения порядка элементов с точки зрения доступности.
свойство flex-direction может принимать одно из четырех значений:
-
ряд -
столбец -
ряд-реверс -
колонна-реверс
Первые два значения сохраняют элементы в том же порядке, в котором они появляются в исходном порядке документа, и отображают их последовательно, начиная с начальной строки.
Вторые два значения меняют местами элементы, меняя местами начальную и конечную строки.
Помните, что начальная строка относится к режимам письма. Приведенные выше примеры, связанные со строками, демонстрируют, как row и row-reverse работают на языке с письмом слева направо, таком как английский. Если вы работаете на языке с письмом справа налево, таком как арабский, тогда ряд будет начинаться справа, ряд-реверс слева.
Это может показаться изящным способом отображения элементов в обратном порядке, однако вы должны помнить, что элементы только визуально отображаются в обратном порядке. В спецификации по этому поводу сказано следующее:
«Примечание. Возможности переупорядочивания гибкого макета намеренно влияют только на визуальный рендеринг, оставляя порядок речи и навигацию на основе исходного порядка. Это позволяет авторам манипулировать визуальным представлением, оставляя исходный порядок нетронутым для не-CSS UA и для линейных такие модели, как речь и последовательная навигация».
— Заказ и ориентацияЕсли бы ваши элементы были ссылками или каким-либо другим элементом, к которому пользователь мог переходить, то порядок перехода был бы таким, как эти элементы появляются в источнике документа, а не вашим визуальным порядком.
Если вы используете обратное значение или иным образом переупорядочиваете свои элементы, вам следует подумать, действительно ли вам нужно изменить логический порядок в источнике. Спецификация продолжается предупреждением не использовать переупорядочивание для исправления проблем в исходном коде:
«Авторы не должны использовать порядок или *-обратные значения flex-flow/flex-direction в качестве замены правильного исходного порядка, так как это может испортить доступность документа.»
Примечание: В течение нескольких лет в Firefox была ошибка, из-за которой он пытался следовать визуальному порядку, а не исходному порядку, из-за чего его поведение отличалось от других браузеров.
Теперь это исправлено. Вы всегда должны принимать исходный порядок как логический порядок документа, поскольку все современные пользовательские агенты будут следовать спецификации и делать это.
В живом примере ниже я добавил стиль фокуса, чтобы при переходе от ссылки к ссылке вы могли видеть, какая из них выделена. Если вы измените порядок, используя flex-direction вы можете видеть, как порядок табуляции продолжает следовать порядку, в котором элементы перечислены в источнике.
Точно так же, как изменение значения flex-direction не меняет порядок перехода к элементам, изменение этого значения не меняет порядок отрисовки. Это только визуальное переворачивание предметов.
В дополнение к изменению порядка визуального отображения гибких элементов, вы можете настроить таргетинг на отдельные элементы и изменить их расположение в визуальном порядке с помощью заказ имущество.
Свойство order предназначено для размещения товаров в порядковых группах .
Это означает, что элементам присваивается целое число, представляющее их группу. Затем элементы размещаются в визуальном порядке в соответствии с этим целым числом, начиная с самых низких значений. Если несколько элементов имеют одинаковое целочисленное значение, то в этой группе элементы располагаются в соответствии с исходным порядком.
Например, у меня есть 5 гибких элементов, и я назначаю порядок следующие значения:
- Исходный элемент 1:
заказ: 2 - Исходный элемент 2:
заказ: 3 - Исходный элемент 3:
заказ: 1 - Исходный элемент 4:
заказ: 3 - Исходный элемент 5:
заказ: 1
Эти элементы будут отображаться на странице в следующем порядке:
- Исходный элемент 3:
порядок: 1 - Исходный элемент 5:
заказ: 1 - Исходный элемент 1:
заказ: 2 - Исходный элемент 2:
заказ: 3 - Исходный элемент 4:
заказ: 3
Вы можете поиграть со значениями в этом живом примере ниже и посмотреть, как это изменит порядок.
Кроме того, попробуйте изменить flex-direction на row-reverse и посмотрите, что произойдет — начальная линия переключается, поэтому порядок начинается с противоположной стороны.
Элементы Flex имеют значение по умолчанию порядок значение 0 , поэтому элементы с целочисленным значением больше 0 будут отображаться после любых элементов, которым не было присвоено явное значение порядка .
Вы также можете использовать отрицательные значения с порядка , что может быть очень полезно. Если вы хотите, чтобы один элемент отображался первым, а порядок всех остальных элементов оставался неизменным, вы можете задать для этого элемента порядок -1 . Поскольку это значение меньше 0, элемент всегда будет отображаться первым.
В приведенном ниже примере живого кода у меня есть элементы, выложенные с помощью Flexbox. Изменяя, какой элемент имеет класс active , назначенный ему в HTML, вы можете изменить, какой элемент отображается первым и, следовательно, становится на всю ширину в верхней части макета, а другие элементы отображаются под ним.
Позиции отображаются в том, что описано в спецификации как заказ-модифицированный заказ-документ . Значение свойства заказа учитывается перед отображением элементов.
Order также изменяет порядок окраски предметов; предметы с более низким значением для порядка будут окрашены первыми, а предметы с более высоким значением для порядка будут окрашены позже.
Использование свойства order имеет точно такие же последствия для доступности, как и изменение направления с помощью flex-direction . Использование порядка изменяет порядок, в котором предметы рисуются, и порядок, в котором они отображаются визуально. Он не меняет порядок последовательной навигации по элементам. Поэтому, если пользователь переключается между элементами, он может обнаружить, что прыгает по макету очень запутанным образом.
Просматривая любой из живых примеров на этой странице, вы можете увидеть, как приказ потенциально создает странный опыт для тех, кто не использует какое-либо указывающее устройство.
Чтобы узнать больше об этом несоответствии визуального порядка и логического порядка, а также о некоторых потенциальных проблемах, связанных с доступностью, см. следующие ресурсы.
- Отключение Flexbox и навигации с клавиатуры
- Порядок исходного кода HTML и порядок отображения CSS
- Конфликт порядка отклика для клавиатуры Focus
Иногда бывает полезен тот факт, что логический и, следовательно, порядок чтения гибких элементов отличается от визуального порядка. При осторожном использовании свойство порядка может позволить легко реализовать некоторые полезные общие шаблоны.
У вас может быть дизайн, например, карточка, которая будет отображать новости. Заголовок новости — это ключевой элемент, который нужно выделить, и это будет элемент, к которому пользователь может перейти, если он переключается между заголовками, чтобы найти контент, который он хочет прочитать. На карте также есть дата; готовый дизайн, который мы хотим создать, выглядит примерно так.
Визуально дата появляется над заголовком, в источнике. Однако, если карта была прочитана программой чтения с экрана, я бы предпочел, чтобы сначала было объявлено название, а затем дата публикации. Мы можем сделать это, используя свойство order .
Карта будет нашим flex-контейнером с flex-direction , установленным в столбец. Затем я даю дату порядка из -1 . Это поднимет его над заголовком.
Эти небольшие изменения относятся к тем случаям, когда порядок свойства имеет смысл. Сохраняйте логический порядок чтения и табуляции в документе и поддерживайте его наиболее доступным и структурированным образом. Затем используйте заказ для чисто визуальных настроек дизайна. При этом следите за тем, чтобы не переупорядочивать элементы, к которым можно получить доступ с клавиатуры, когда пользователь перемещается по вкладке. Особенно при использовании новых методов макета вы должны убедиться, что тестирование вашего браузера включает в себя тестирование сайта с использованием только клавиатуры, а не мыши или сенсорного экрана.
Вы быстро увидите, затрудняет ли ваш выбор разработки возможность обойти контент.
Последнее изменение: , участниками MDN
заказ | CSS-трюки — CSS-трюки
DigitalOcean предоставляет облачные продукты для каждого этапа вашего путешествия. Начните с бесплатного кредита в размере 200 долларов США!
Свойство order является подсвойством модуля «Макет гибкого блока». По умолчанию элементы Flex отображаются в том же порядке, в котором они отображаются в исходном документе. Свойство order можно использовать для изменения этого порядка.
.элемент {
порядок: 3;
} Синтаксис
order:
Демонстрация
Следующая демонстрация показывает, как порядок по умолчанию (1, 2, 3, 4, 5) был изменен путем установки свойства order для каждого элемента.
Другие ресурсы
- Модуль CSS Flexible Box Layout Level 1
- Документация MDN
- Advanced cross-browser flexbox
- Руководство по Flexbox
- Использование Flexbox
- Старый Flexbox и новый Flexbox
Browser support
| IE | Edge | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| 10 1 11 | 12+ | 20+ | 21- 28 2 29+ | 7-8 2 9+ | 12. 1+ |
| iOS Safari | Chrome Android | Firefox Android | Android Browser | Opera Mobile |
|---|---|---|---|---|
| 7-8.4 2 9+ | 92+ | 90+ | 92+ | 12.1+ |
сгибаться
.элемент { flex: 1 1 100px; }