CSS-dagi flex bloklar tartibi

Quyidagi qatorga joylashtirilgan bloklar berilgan bo'lsin:

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

Результат:

Keling, ularning HTML kodidagi tartibini o'zgartirmasdan, ekranda ko'rinish tartibini o'zgartiramiz.

Buning uchun order xususiyati mavjud bo'lib, u elementlarning ketma-ketlik tartibini quyidagi qoida asosida belgilaydi: qaysi elementning qiymati katta bo'lsa, o'q oxiriga yaqinroq turadi, qaysi elementning kichik bo'lsa - o'q boshiga yaqinroq turadi.

Xususiyatning qiymati ijobiy yoki salbiy son bo'lishi mumkin. Standart bo'yicha barcha elementlar bir-birining ketidan keladi, bu ularning order qiymati nolga teng degani.

Keling, elementlarimizning tartibini o'zgartiramiz. Buning uchun ikkinchi elementga qo'shimcha elem klassini beramiz va bu klass uchun order xususiyatini 1 qiymatiga o'rnatamiz:

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

Barcha elementlar standart bo'yicha 0 tartibga ega bo'lgani uchun, bizning ikkinchi elementimiz boshqalarga qaraganda katta tartibga ega bo'ladi, shuning uchun u ularning orqasida joylashadi:

Keling endi salbiy qiymat -1 beraylik:

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

Bunday holda bizning blokimiz o'q boshiga ko'chadi: