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

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

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

.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 արժեքով.

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

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

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

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

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

Ինքնուրույն փորձարկեք այս հատկության աշխատանքը առանցքի տարբեր ուղղությունների համար: