Flex plokkide järjestus CSS-is

Oletagem, et meil on järgmised plokid, mis on reastatud ritta:

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

Muudame nende kuvamise järjekorda ekraanil, muutmata nende järjekorda HTML-koodis.

Selleks on olemas omadus order, mis määrab konkreetsete elementide järjestuse järgmise reegli kohaselt: kellel on suurem väärtus, see asub telje lõpu lähemal, ja kellel on väiksem - see asub telje alguse lähemal.

Omaduse väärtusena saab kasutada positiivset või negatiivset numbrit. Vaikimisi järgnevad kõik elemendid üksteisele, see tähendab, et order on neil null.

Muudame oma elementide järjekorda. Selleks määrame teisele elemendile lisaklassi elem ja sellele klassile määrame omaduse order väärtuseks 1:

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

Kuna kõikidel elementidel on vaikimisi järjekord 0 ja meie teisel elemendil on järjekord suurem kui teistel, siis see paikneb pärast neid:

Määrame nüüd negatiivse väärtuse -1:

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

Sellisel juhul liigub meie plokk telje algusesse:

Proovige selle omaduse tööd iseseisvalt erinevate telje suundade korral.