CSS свойство order
определяет порядок, используемый для размещения flex элементов в их flex контейнере. Элементы располагаются в восходящем порядке по значению order
. Элементы с одинаковым значением order
располагаются в том порядке, в каком они находятся в исходном коде.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Исходный код этого интерактивного примера хранится в GitHub репозитории. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте https://github.com/mdn/interactive-examples и пришлите нам pull request.
Синтаксис
/* Числовые значения, в том числе отрицательные */
order: 5;
order: -5;
/* Глобальные значения */
order: inherit;
order: initial;
order: unset;
Важно: order
воздействует только на визуальный порядок элементов, но не логический порядок или табуляцию. order
не должен применяться к невизуальным медиаданным, таким как речь.
Посмотрите Используем CSS flexible boxes для более подробной информации и дополнительных свойствах.
Значения
<integer>
- Представляет порядковую группу, которая присвоена flex элементу.
Формальный синтаксис
Примеры
Имеется базовый отрывок HTML кода:
<header>...</header>
<main>
<article>Article</article>
<nav>Nav</nav>
<aside>Aside</aside>
</main>
<footer>...</footer>
Следующий CSS код должен создать классический блок контента окруженный боковыми панелями. Flexible Box Layout Module автоматически создаёт блоки одинаковой высоты и максимально допустимой ширины.
main { display: flex; text-align:center; }
main > article { flex:1; order: 2; }
main > nav { width: 200px; order: 1; }
main > aside { width: 200px; order: 3; }
Результат
Спецификация
Спецификация | Статус | Комментарии |
---|---|---|
CSS Flexible Box Layout Module Определение 'order' в этой спецификации. |
Кандидат в рекомендации | Начальное определение |
Совместимость с браузерами
BCD tables only load in the browser