Vrstni red flex blokov v CSS

Recimo, da imamo naslednje bloke, razporejene v vrsto:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
	<div class="child">4</div>
	<div class="child">5</div>
</div>

.parent {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	width: 300px;
	height: 200px;
	border: 1px solid red;
}
.child {
	width: 50px;
	height: 50px;
	border: 1px solid green;
}

Spremenimo njihov vrstni red prikaza na zaslonu, ne da bi spremenili njihov vrstni red v HTML kodi.

Za to obstaja lastnost order, ki določa vrstni red posameznih elementov po naslednjem pravilu: tisti z večjo vrednostjo stoji bližje koncu osi, tisti z manjšo vrednostjo pa bližje začetku.

Lastnost lahko sprejme pozitivno ali negativno število. Privzeto vsi elementi sledijo drug za drugim, kar pomeni, da je njihov order enak nič.

Spremenimo vrstni red naših elementov. Za to bomo drugemu elementu dodelili dodatni razred elem in za ta razred nastavili lastnost order na vrednost 1:

.elem {
	order: 1;
	border: 1px solid red;
}

Ker bodo vsi elementi privzeto imeli vrstni red 0, naš drugi element pa bo imel vrstni red večji od ostalih, se bo le-ta postavil za njimi:

Zdaj pa dodelimo negativno vrednost -1:

.elem {
	order: -1;
	border: 1px solid red;
}

V tem primeru se bo naš blok premaknil na začetek osi:

Samostojno preizkusite delovanje te lastnosti za različne smeri osi.