Тартиби 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;
}

Дар ин ҳолат блоки мо ба оғози меҳвар ҷой иваз мекунад:

Бо таври худ кори ин хосиятро барои самтҳои гуногуни меҳвар озмоед.