Ordinea blocurilor flex în CSS

Să presupunem că avem următoarele blocuri, aliniate într-un rând:

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

Результат:

Să schimbăm ordinea în care sunt afișate pe ecran, fără a modifica ordinea lor în codul HTML.

Pentru aceasta există proprietatea order, care stabilește ordinea de dispunere a elementelor conform următoarei reguli: elementul cu valoarea mai mare este poziționat mai aproape de sfârșitul axei, iar elementul cu valoarea mai mică este poziționat mai aproape de început.

Valoarea proprietății poate fi un număr pozitiv sau negativ. În mod implicit, toate elementele se succed unul după altul, ceea ce înseamnă că order pentru ele este zero.

Să schimbăm ordinea elementelor noastre. Pentru aceasta, vom atribui celui de-al doilea element clasa suplimentară elem și pentru această clasă vom seta proprietatea order la valoarea 1:

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

Deoarece toate elementele vor avea implicit ordinea 0, iar al doilea element va avea o ordine mai mare decât restul, acesta va fi poziționat după ele:

Acum să setăm o valoare negativă -1:

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

În acest caz, blocul nostru se va muta la începutul axei: