Flex բլոկների հերթականությունը CSS-ում

Ենթադրենք ունենք հետևյալ բլոկները, որոնք դասավորված են մի շարքով.

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

Результат:

Եկեք փոխենք դրանց ցուցադրման հերթականությունը էկրանին, առանց HTML կոդում դրանց հերթականությունը փոխելու:

Դրա համար գոյություն ունի order հատկությունը, որը սահմանում է կոնկրետ տարրերի հաջորդականությունը հետևյալ կանոնի համաձայն. ով ունի ավելի մեծ արժեք, նա գտնվում է առանցքի վերջին մոտ, իսկ ով ունի ավելի փոքր արժեք՝ նա գտնվում է առանցքի սկզբին մոտ:

Հատկության արժեքը կարող է լինել դրական կամ բացասական թիվ: Լռելյայնորեն բոլոր տարրերը հաջորդում են մեկը մյուսին, ինչը նշանակում է, որ order-ը նրանց մոտ զրոյական է:

Եկեք փոխենք մեր տարրերի հերթականությունը: Դրա համար երկրորդ տարրին տանք լրացուցիչ elem դաս և այդ դասի համար սահմանենք order հատկությունը 1 արժեքով.

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

Քանի որ բոլոր տարրերը լռելյայնորեն կունենան 0 հերթականություն, իսկ մեր երկրորդ տարրը կունենա մյուսներից մեծ հերթականություն, ապա այն կտեղադրվի նրանցից ավելի ուշ.

Եկեք այժմ սահմանենք բացասական արժեք -1.

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

Այս դեպքում մեր բլոկը կտեղափոխվի առանցքի սկիզբ.