Order xususiyati

order xususiyati flex-konteyner ichidagi alohida flex-blokning ketma-ketligini belgilaydi. Muayyan flex blokga qo'llaniladi.

Xususiyat musbat yoki manfiy butun sonni qiymat sifatida qabul qiladi. Raqam qancha kichik bo'lsa, element shuncha oldin joylashadi, boshqa elementlarga nisbatan HTML kodidagi joylashuvidan qat'iy nazar.

Sintaksis

cssselector {
  order: musbat yoki manfiy son;
}

Misol

Ushbu misolda barcha bloklarga order yordamida joylashuv tartibi belgilangan. Eng birinchi bo'lib order -1 bo'lgan manfiy blok, keyin order 1 bo'lgan blok va hokazo o'sish tartibida:

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

Результат:

Shuningdek qarang