Svojstvo order

Svojstvo order zadaje redosled praćenja pojedinačnog flex bloka unutar flex kontejnera. Primerjuje se na konkretan flex blok.

Svojstvo kao vrednost prihvata pozitivan ili negativan ceo broj. Što je broj manji - to će element biti ranije, bez obzira na položaj u HTML kodu u odnosu na druge elemente.

Sintaksa

selektor {
	order: pozitivan ili negativan broj;
}

Primer

U ovom primeru svim blokovima je zadat redosled raspoređivanja pomoću order. Prvi će biti blok sa negativnim order -1, pa sa order 1 i tako dalje u rastućem redosledu:

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

Vidi takođe

svojstvo flex-direction,
koje zadaje pravac osa flex blokova
svojstvo justify-content,
koje zadaje poravnanje duž glavne ose
svojstvo align-items,
koje zadaje poravnanje duž poprečne ose
svojstvo flex-wrap,
koje višelinijski raspored flex blokova
svojstvo flex-flow,
skraćenica za flex-direction i flex-wrap
svojstvo align-self,
koje zadaje poravnanje jednog bloka
svojstvo flex-basis,
koje zadaje veličinu konkretnog flex bloka
svojstvo flex-grow,
koje zadaje pohlepnost flex blokova
svojstvo flex-shrink,
koje zadaje sabitljivost flex blokova
svojstvo flex,
skraćenica za flex-grow, flex-shrink i flex-basis