order¶
Свойство order
определяет порядок вывода флексов внутри флекс-контейнера.
Элементы располагаются согласно значениям свойства order
от меньшего к большему. При равных значениях order
элементы выводятся в том порядке, в каком они появляются в исходном коде.
Flexbox и выравнивание
Синтаксис¶
/* <integer> values */
order: 5;
order: -5;
/* Global values */
order: inherit;
order: initial;
order: unset;
Значения¶
Значение по-умолчанию: 0
Наследуется: нет
Применяется к флекс-элементам
Анимируется: да
В качестве значения принимается любое целое число, включая отрицательные числа и ноль.
Примечание¶
- Safari до версии 9 поддерживает свойство
-webkit-order
.
Спецификации¶
Поддержка браузерами¶
Описание и примеры¶
<!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 class="flex-container">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
</ul>
</body>
</html>
- 1
- 2
- 3
- 4
- 5