Sifa order

Sifa order inaweka mpangilio wa kufuata wa kizuizi cha flex kilichochaguliwa ndani ya chombo cha flex. Inatumika kwa kizuizi maalum cha flex.

Kama thamani yake, sifa inakubali nambari kamili chanya au hasi. Kadiri nambari iwe ndogo ndivyo kipengele kitakavyosimama mapema, bila kujali eneo lake kwenye msimbo wa HTML ukilinganisha na vipengele vingine.

Kisarufi

kichaguli {
	order: nambari chanya au hasi;
}

Mfano

Katika mfano huu, vipengele vyote vimewekewa mpangilio wa eneo kwa kutumia order. Kizuizi cha kwanza kabisa kitakuwa chenye order hasi -1, kisha kile chenye order 1 na kadhalika kwa kupanda:

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

Angalia pia

sifa flex-direction,
ambayo inaweka mwelekeo wa shoka za vizuizi vya flex
sifa justify-content,
ambayo inaweka mpangilio kwenye shoka kuu
sifa align-items,
ambayo inaweka mpangilio kwenye shoka la pili
sifa flex-wrap,
ambayo inaweka mistari mingi ya vizuizi vya flex
sifa flex-flow,
ufupisho wa flex-direction na flex-wrap
sifa align-self,
ambayo inaweka mpangilio wa kizuizi kimoja
sifa flex-basis,
ambayo inaweka ukubwa wa kizuizi maalum cha flex
sifa flex-grow,
ambayo inaweka uwezo wa kukua wa vizuizi vya flex
sifa flex-shrink,
ambayo inaweka uwezo wa kujikunja wa vizuizi vya flex
sifa flex,
ufupisho wa flex-grow, flex-shrink na flex-basis