Sifa order

Sifa order inaweka mpangilio wa kufuata wa kizuizi cha flex kilichochaguliwa ndani ya chombo cha flex. Inatumika kwa kizuizi maalum cha flex.

Kama thamani yake, sifa inakubali nambari kamili chanya au hasi. Kadiri nambari iwe ndogo ndivyo kipengele kitakavyosimama mapema, bila kujali eneo lake kwenye msimbo wa HTML ukilinganisha na vipengele vingine.

Kisarufi

csskichaguli {
  order: nambari chanya au hasi;
}

Mfano

Katika mfano huu, vipengele vyote vimewekewa mpangilio wa eneo kwa kutumia order. Kizuizi cha kwanza kabisa kitakuwa chenye order hasi -1, kisha kile chenye order 1 na kadhalika kwa kupanda:

html<div id="parent">
  <div id="elem1">1</div>
  <div id="elem2">2</div>
  <div id="elem3">3</div>
  <div id="elem4">4</div>
  <div id="elem5">5</div>
  <div id="elem6">6</div>
</div>

css#parent {
  display: flex;
  align-items: flex-start;
  flex-direction: row;
}
#parent > div {
  border: 1px solid #696989;
  min-width: 100px;
}
#elem1 {
  order: 4;
}
#elem2 {
  order: 5;
}
#elem3 {
  order: 3;
}
#elem4 {
  order: 2;
}
#elem5 {
  order: 1;
}
#elem6 {
  order: -1;
}

Результат:

Angalia pia