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

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

html<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>

css.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:

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

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

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

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

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