A flex blokkok sorrendje CSS-ben

Tegyük fel, hogy a következő blokkjaink vannak, sorba rendezve:

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

Változtassuk meg a képernyőn való megjelenésük sorrendjét anélkül, hogy megváltoztatnánk a HTML kódban való sorrendjüket.

Erre szolgál a order tulajdonság, amely a konkrét elemek követési sorrendjét a következő szabály szerint határozza meg: akinek nagyobb az értéke, az áll közelebb a tengely végéhez, akinek kisebb - az áll közelebb az elejéhez.

A tulajdonság értéke pozitív vagy negatív szám lehet. Alapértelmezetten minden elem egymás után következik, ez azt jelenti, hogy a order értékük nulla.

Változtassuk meg elemeink sorrendjét. Ehhez adjunk a második elemnek egy további elemm osztályt, és ennek az osztálynak állítsuk be a order tulajdonságot 1 értékre:

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

Mivel az összes elem alapértelmezetten 0 sorrenddel rendelkezik, a második elemünk pedig nagyobb sorrenddel, mint a többi, ezért azok után fog elhelyezkedni:

Most adjunk meg negatív értéket -1:

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

Ebben az esetben a blokkunk a tengely elejére kerül:

Próbálja ki önállóan ennek a tulajdonságnak a működését különböző tengelyirányok esetén.