Vetia order

Vetia order përcakton rendin e ndjekjes së një blloku flex të marrë veçmas brenda flex-kontejnerit. Aplikohet në një bllok flex specifik.

Si vlerë, vetia pranon një numër të plotë pozitiv ose negativ. Sa më i vogël të jetë numri, aq më herët do të vendoset elementi, pavarësisht nga vendosja në kodin HTML në raport me elementët e tjerë.

Sintaksa

përzgjedhësi {
	order: numër pozitiv ose negativ;
}

Shembull

Në këtë shembull, të gjithë blloqeve u është caktuar renditja e vendosjes me anë të order. Blloku i parë do të jetë ai me order negative -1, pastaj ai me order 1 dhe kështu me radhë sipas rritjes:

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

Shihni gjithashtu

vetia flex-direction,
e cila përcakton drejtimin e akseve të blloqeve flex
vetia justify-content,
e cila përcakton radhitjen përgjatë boshtit kryesor
vetia align-items,
e cila përcakton radhitjen përgjatë boshtit tërthor
vetia flex-wrap,
e cila përcakton shumë-rreshtshmërinë e blloqeve flex
vetia flex-flow,
shkurtim për flex-direction dhe flex-wrap
vetia align-self,
e cila përcakton radhitjen e një blloku të vetëm
vetia flex-basis,
e cila përcakton madhësinë e një blloku specifik flex
vetia flex-grow,
e cila përcakton lakminë e blloqeve flex
vetia flex-shrink,
e cila përcakton ngjeshshmërinë e blloqeve flex
vetia flex,
shkurtim për flex-grow, flex-shrink dhe flex-basis