Lastnost order

Lastnost order določa vrstni red posameznega flex bloka znotraj flex kontejnerja. Uporablja se za posamezen flex blok.

Lastnost sprejme pozitivno ali negativno celo število. Manjše kot je število, prej se bo element prikazal, neodvisno od njegovega položaja v HTML kodi glede na druge elemente.

Sintaksa

selektor {
	order: pozitivno ali negativno število;
}

Primer

V tem primeru je vsem blokom določen vrstni red z lastnostjo order. Prvi bo blok z negativnim order -1, nato z order 1 in tako naprej po naraščajočem vrstnem redu:

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

Glej tudi

lastnost flex-direction,
ki določa smer osi flex blokov
lastnost justify-content,
ki določa poravnavo vzdolž glavne osi
lastnost align-items,
ki določa poravnavo vzdolž prečne osi
lastnost flex-wrap,
ki določa večvrstičnost flex blokov
lastnost flex-flow,
okrajšava za flex-direction in flex-wrap
lastnost align-self,
ki določa poravnavo enega bloka
lastnost flex-basis,
ki določa velikost posameznega flex bloka
lastnost flex-grow,
ki določa "pohlepnost" flex blokov
lastnost flex-shrink,
ki določa stisljivost flex blokov
lastnost flex,
okrajšava za flex-grow, flex-shrink in flex-basis