Redosled flex blokova u CSS-u

Pretpostavimo da imamo sledeće blokove, poredane u red:

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

Hajde da promenimo redosled njihovog prikazivanja na ekranu, bez menjanja njihovog redosleda u HTML kodu.

Za ovo postoji svojstvo order, koje određuje redosled pojedinačnih elemenata prema sledećem pravilu: onaj sa većom vrednošću stoji bliže kraju ose, a onaj sa manjom - bliže početku.

Vrednost svojstva može biti pozitivan ili negativan broj. Podrazumevano, svi elementi se slede jedan za drugim, što znači da je order za njih nula.

Hajde da promenimo redosled naših elemenata. Za ovo ćemo drugom elementu dodeliti dodatnu klasu elem i za tu klasu podesiti svojstvo order na vrednost 1:

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

Pošto će svi elementi podrazumevano imati redosled 0, a naš drugi element će imati redosled veći od ostalih, on će se pozicionirati posle njih:

Sada ćemo postaviti negativnu vrednost -1:

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

U ovom slučaju naš blok će se pomeriti na početak ose:

Samostalno isprobajte rad ovog svojstva za različite smerove ose.