CSS-dagi flex bloklar tartibi

Quyidagi qatorga joylashtirilgan bloklar berilgan bo'lsin:

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

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:

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

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

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

Ushbu xususiyatning turli o'q yo'nalishlari uchun ishlashini mustaqil ravishda sinab ko'ring.