Volgorde van flex blokken in CSS

Stel we hebben de volgende blokken, op een rij uitgelijnd:

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

Laten we de volgorde van hun weergave op het scherm veranderen, zonder hun volgorde in de HTML code aan te passen.

Hiervoor bestaat de eigenschap order, die de volgorde van specifieke elementen bepaalt volgens de volgende regel: degene met een hogere waarde staat dichter bij het einde van de as, en degene met een lagere waarde staat dichter bij het begin.

De eigenschap kan een positief of negatief getal als waarde aannemen. Standaard volgen alle elementen elkaar op, dit betekent dat order voor hen nul is.

Laten we de volgorde van onze elementen veranderen. Hiervoor geven we het tweede element een extra class elem en voor deze class stellen we de eigenschap order in op de waarde 1:

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

Omdat alle elementen standaard een volgorde van 0 hebben, en ons tweede element een hogere volgorde zal hebben dan de rest, zal het zich later dan hen positioneren:

Laten we nu een negatieve waarde instellen -1:

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

In dit geval zal ons blok naar het begin van de as verschuiven:

Probeer zelf de werking van deze eigenschap uit voor verschillende asrichtingen.