CSS да Flex блоклар тартиби

Бизга куйидаги каторда жойлашган блоклар берилган деб фараз қилайлик:

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

Бунда холда бизнинг блокимиз ўқнинг бошланғич томонига кўчиб ўтади:

Ушбу хусусиятнинг турли ўқ йўналшишлари учун ишлашини мустақил равишда синаб кўринг.