Rekkefølge av flex-bokser i CSS

La oss si at vi har følgende blokker, ordnet på rad:

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

La oss endre rekkefølgen de vises i på skjermen, uten å endre rekkefølgen i HTML-koden.

For dette finnes egenskapen order, som angir rekkefølgen for konkrete elementer etter følgende regel: den med høyest verdi står nærmere slutten av aksen, og den med lavere verdi står nærmere starten.

Egenskapen kan ta et positivt eller negativt tall som verdi. Som standard følger alle elementer etter hverandre, dette betyr at order for dem er null.

La oss endre rekkefølgen på elementene våre. For å gjøre dette, la oss sette en ekstra klasse elem på det andre elementet og for denne klassen sette egenskapen order til verdien 1:

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

Siden alle elementene som standard vil ha rekkefølge 0, og vårt andre element vil ha høyere rekkefølge enn de andre, vil det plasseres etter dem:

La oss nå sette en negativ verdi -1:

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

I dette tilfellet vil blokken vår flytte seg til starten av aksen:

Prøv selv å teste hvordan denne egenskapen fungerer for ulike retninger på aksen.