Mpangilio wa Flex Blocks katika CSS

Acha tuwe na blocks zifuatazo, zilizopangwa kwenye mstari:

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

Результат:

Wacha tubadilishe mpangilio wao wa kuonyeshwa kwenye screen, bila kubadilisha mpangilio wao katika HTML code.

Kwa hili kuna property order, ambayo huweka mpangilio wa kufuata kwa elements maalum kulia sheria ifuatayo: yule anaye na thamani kubwa zaidi, anasimama karibu na mwisho wa mhimili, na yule anaye na thamani ndogo - anasimama karibu na mwanzo.

Thamani ya property inaweza kukubali nambari chanya au hasi. Kwa default, elements zote hufuatana moja baada ya nyingine, hii inamaanisha kuwa order yao ni sifuri.

Wacha tubadilishe mpangilio wa elements zetu. Kwa hili tuweke kwa element ya pili class ya ziada elem na kwa class hii tuweke property order kwa thamani 1:

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

Kwa kuwa elements zote kwa default zitakuwa na mpangilio 0, na element yetu ya pili itakuwa na mpangilio mkubwa zaidi, kuliko zingine zote, basi itapangwa baada yao:

Sasa tuweke thamani hasi -1:

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

Katika kesi hii block yetu itahamishwa kwenye mwanzo wa mhimili: