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

Бул учурда биздин блок октун башына жылат:

Өз алдынча бул касиеттин иштешин ар кандай багыттагы октор үчүн сынап көрүңүз.