Poradie flex blokov v CSS

Majme nasledujúce bloky, zoradené v rade:

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

Zmeňme poradie ich zobrazenia na obrazovke, bez zmeny ich poradia v HTML kóde.

Na to existuje vlastnosť order, ktorá určuje poradie konkrétnych elementov podľa nasledujúceho pravidla: ten, kto má väčšiu hodnotu, stojí bližšie ku koncu osi, a ten, kto má menšiu - stojí bližšie k začiatku.

Hodnotou vlastnosti môže byť kladné alebo záporné číslo. Všetky elementy sú predvolene zoradené za sebou, čo znamená, že order majú nulový.

Zmeňme poradie našich elementov. Na to nastavme druhému elementu dodatočnú triedu elem a pre túto triedu nastavme vlastnosť order na hodnotu 1:

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

Pretože všetky elementy budú mať predvolene poradie 0, a náš druhý element bude mať poradie väčšie ako ostatné, bude sa nachádzať za nimi:

Skúsme teraz nastaviť zápornú hodnotu -1:

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

V tomto prípade sa náš blok presunie na začiatok osi:

Samostatne vyskúšajte činnosť tejto vlastnosti pre rôzne smery osi.