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

Бұл жағдайда біздің блок осьтің басына қарай жылжиды:

Бұл қасиеттің жұмын әртүрлі ось бағыттары үшін өз бетіңізше сынап көріңіз.