Volgorde van flex blokke in CSS

Laat ons die volgende blokke hê, wat in 'n ry gerangskik is:

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

Kom ons verander die volgorde waarin hulle op die skerm vertoon word, sonder om hul volgorde in die HTML-kode te verander.

Hiervoor bestaan die eienskap order, wat die volgorde van spesifieke elemente bepaal volgens die volgende reël: die een met die hoër waarde staan nader aan die einde van die as, en die een met 'n laer waarde staan nader aan die begin.

Die eienskap kan 'n positiewe of negatiewe getal as waarde aanvaar. By verstek volg alle elemente mekaar, wat beteken hul order is nul.

Kom ons verander die volgorde van ons elemente. Om dit te doen, ken ons die bykomende klas elem aan die tweede element toe en stel ons die eienskap order vir daardie klas in op die waarde 1:

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

Aangesien alle elemente by verstak 'n volgorde van 0 sal hê, en ons tweede element 'n hoër volgorde as die ander sal hê, sal dit na hulle geplaas word:

Kom ons stel nou 'n negatiewe waarde van -1:

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

In hierdie geval sal ons blok na die begin van die as verskuif:

Probeer die werking van hierdie eienskap self vir verskillende asrigtings.