# Порядок flex блоков в CSS

Пусть у нас даны следующие блоки, выстроенные в ряд:

`<div class="parent"> <div class="child">1</div> <div class="child">2</div> <div class="child">3</div> <div class="child">4</div> <div class="child">5</div> </div>` `.parent { display: flex; flex-direction: row; justify-content: center; align-items: center; width: 300px; height: 200px; border: 1px solid red; } .child { width: 50px; height: 50px; border: 1px solid green; }`

:

Давайте поменяем порядок их отображения на экране, не меняя их порядок в HTML коде.

Для этого существует свойство `order`, которое задает порядок следования конкретных элементов по следующему правилу: у кого больше значение, тот стоит ближе к концу оси, а у кого он меньше - тот стоит ближе к началу.

Значением свойство может принимать положительное или отрицательное число. По умолчанию все элементы следуют друг за другом, это значит, что `order` у них нулевой.

Давайте поменяем порядок наших элементов. Для этого установим второму элементу дополнительный класс elem и для этого класса установим свойство `order` в значение `1`:

`.elem { order: 1; border: 1px solid red; }`

Так как все элементы по умолчанию будут иметь порядок `0`, а наш второй элемент будет иметь порядок больше, чем остальные, то он будет располагаться позже их:

Давайте теперь зададим отрицательное значение `-1`:

`.elem { order: -1; border: 1px solid red; }`

В этом случае наш блок переместиться к началу оси:

Самостоятельно опробуйте работу данного свойства для различных направлений оси.

← →
↑