CSS-də flex bloklarının sırası

Tutaq ki, bizə sıra ilə düzülmüş aşağıdakı bloklar verilib:

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

Gəlin onların HTML kodundakı sırasını dəyişmədən ekranda göstərilmə sırasını dəyişək.

Bunun üçün order xassəsi mövcuddur, o, konkret elementlərin izləmə sırasını aşağıdakı qayda ilə təyin edir: kimin dəyəri böyükdürsə, oxun sonuna daha yaxın durur, kiminki kiçikdirsə - o, başlanğıca daha yaxın durur.

Xassənin dəyəri müsbət və ya mənfi ədəd ola bilər. Standart olaraq bütün elementlər bir-birinin ardınca gəlir, bu o deməkdir ki, onların order dəyəri sıfırdır.

Gəlin elementlərimizin sırasını dəyişək. Bunun üçün ikinci elementə əlavə elem sinifi təyin edək və bu sinif üçün order xassəsini 1 dəyərinə təyin edək:

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

Bütün elementlər standart olaraq 0 sırasına malik olacağı üçün, bizim ikinci elementimizin sırası digərlərindən böyük olacaq, ona görə də o onlardan sonra yerləşəcək:

Gəlin indi mənfi dəyər -1 təyin edək:

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

Bu halda bizim blok oxun başlanğıcına doğru yerini dəyişəcək:

Bu xassənin işini müxtəlif ox istiqamətləri üçün müstəqil şəkildə sınayın.