Свойство order
Устанавливает порядок размещения элемента в контейнере flex или grid. Элементы в контейнере сортируются по возрастанию значения. Если order указан не для всех элементов flex-контейнера, то элементы сортируются по порядку их положения в HTML коде, а затем по значению указанному в order
order: 1;Пошаговый план! Как быстро научиться создавать сайты!
- поддерживается начиная с
- частичная поддержка до
- не поддерживается
Значения
order: 3;
Порядок размещения элемента в контейнере равно 1. Можно использовать положительные и отрицательные целые числа, а так же ноль.
<style>
.example-flex {
display: flex;
flex-wrap: wrap;
height: 100px;
}
.example-item {
width: 100px;
font-size: 21px;
color: #fff;
}
.example-item.bg-red {
order: 3;
}
.example-item.bg-green {
order: 1;
}
.example-item.bg-black {
order: 2;
}
</style>
<div class="example-flex">
<div class="example-item bg-red">1</div>
<div class="example-item bg-green">2</div>
<div class="example-item bg-black">3</div>
</div>1
2
3