Ordem dos blocos flex em CSS

Suponha que temos os seguintes blocos, alinhados em uma linha:

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;
}

Результат:

Vamos mudar a ordem em que são exibidos na tela, sem alterar sua ordem no código HTML.

Para isso, existe a propriedade order, que define a ordem de seguimento de elementos específicos de acordo com a seguinte regra: quem tem um valor maior, fica mais próximo do final do eixo, e quem tem um valor menor - fica mais próximo do início.

O valor da propriedade pode ser um número positivo ou negativo. Por padrão, todos os elementos seguem um após o outro, o que significa que o order deles é zero.

Vamos mudar a ordem dos nossos elementos. Para isso, vamos definir uma classe adicional 'elem' para o segundo elemento e para esta classe definir a propriedade order com o valor 1:

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

Como todos os elementos por padrão terão ordem 0, e nosso segundo elemento terá uma ordem maior que os demais, então ele será posicionado após eles:

Agora, vamos definir um valor negativo -1:

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

Neste caso, nosso bloco se moverá para o início do eixo: