Flex-lohkojen järjestys CSS:ssä

Oletetaan, että meillä on seuraavat riviksi asetetut lohkot:

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

Muutetaan niiden näyttöjärjestystä näytöllä muuttamatta niiden järjestystä HTML-koodissa.

Tätä varten on olemassa ominaisuus order, joka asettaa yksittäisten elementtien seurausjärjestyksen seuraavan säännön mukaan: kenellä on suurempi arvo, se seisoo lähempänä akselin loppua, ja kenellä on pienempi - se seisoo lähempänä alkua.

Ominaisuuden arvona voi olla positiivinen tai negatiivinen luku. Oletusarvoisesti kaikki elementit seuraavat toisiaan, tämä tarkoittaa, että order on niillä nolla.

Muutetaan elementtiemme järjestystä. Asetetaan toiselle elementille lisäluokka elem ja tälle luokalle asetetaan ominaisuus order arvoksi 1:

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

Koska kaikkien elementtien järjestys on oletusarvoisesti 0, ja meidän toisen elementin järjestys on suurempi kuin muilla, niin se sijoitetaan niiden jälkeen:

Asetetaan nyt negatiivinen arvo -1:

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

Tässä tapauksessa lohkomme siirtyy akselin alkuun:

Kokeile itsenäisesti tämän ominaisuuden toimintaa eri akselisuuntien osalta.