Flex blokų tvarka CSS

Tarkime, kad turime šiuos blokus, išdėstytus į eilę:

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

Pakeiskime jų atvaizdavimo tvarką ekrane, nekeisdami jų tvarkos HTML kode.

Tam yra savybė order, kuri nustato konkrečių elementų sekmę pagal šią taisyklę: tas, kurio reikšmė didesnė, stovi arčiau ašies pabaigos, o tas, kurio reikšmė mažesnė - stovi arčiau pradžios.

Savybės reikšmė gali būti teigiamas arba neigiamas skaičius. Pagal nutylėjimą visi elementai seka vienas kitą, tai reiškia, kad order jų yra nulinis.

Pakeiskime mūsų elementų tvarką. Tam antrajam elementui nustatykime papildomą klasį elem ir šiai klasei nustatykime savybę order reikšme 1:

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

Kadangi visi elementai pagal nutylėjimą turės tvarką 0, o mūsų antrasis elementas turės didesnę tvarką nei likusieji, jis bus išdėstomas vėliau už jų:

Dabar nustatykime neigiamą reikšmę -1:

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

Šiuo atveju mūsų blokas persikels į ašies pradžią:

Savarankiškai išbandykite šios savybės veikimą skirtingiems ašių kryptims.