Order қасиеті

order қасиеті flex-контейнер ішіндегі жеке flex-блоктың орналасу тәртібін белгілейді. Нақты flex блогына қолданылады.

Қасиет оң немесе теріс бүтін санды мән ретінде қабылдайды. Сан неғұрлым кіші болса, элемент соғұрлым ертерек орналасады, басқа элементтерге қатысты HTML кодындағы орналасуына қарамастан.

Синтаксис

селектор {
	order: оң немесе теріс сан;
}

Мысал

Бұл мысалда барлық блоктарға order көмегімен орналасу тәртібі белгіленген. Ең бірінші болып теріс order -1 бар блок орналасады, содан кейін order 1 бар блок және т.с.с. өсу ретімен:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
	<div id="elem5">5</div>
	<div id="elem6">6</div>
</div>

#parent {
	display: flex;
	align-items: flex-start;
	flex-direction: row;
}
#parent > div {
	border: 1px solid #696989;
	min-width: 100px;
}
#elem1 {
	order: 4;
}
#elem2 {
	order: 5;
}
#elem3 {
	order: 3;
}
#elem4 {
	order: 2;
}
#elem5 {
	order: 1;
}
#elem6 {
	order: -1;
}

Сондай-ақ қараңыз

flex-direction қасиеті,
ол flex блоктар осьтерінің бағытын белгілейді
justify-content қасиеті,
ол негізгі ось бойынша туралауды белгілейді
align-items қасиеті,
ол көлденең ось бойынша туралауды белгілейді
flex-wrap қасиеті,
ол flex блоктардың көпжолдылығын белгілейді
flex-flow қасиеті,
flex-direction және flex-wrap үшін қысқарту
align-self қасиеті,
ол бір блоктың туралауын белгілейді
flex-basis қасиеті,
ол нақты flex блогының өлшемін белгілейді
flex-grow қасиеті,
ол flex блоктардың "ашкөздігін" белгілейді
flex-shrink қасиеті,
ол flex блоктардың сығылуын белгілейді
flex қасиеті,
flex-grow, flex-shrink және flex-basis үшін қысқарту