Свойство 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

Читайте также

Обсуждение (0)

Войдите или зарегистрируйтесь для того чтобы оставлять комментарии