Редослед на flex блоковите во CSS

Нека имаме следниве блокови, подредени во ред:

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

Ајде да го смениме редоследот на нивното прикажување на екранот, без да го менуваме нивниот редослед во HTML кодот.

За ова постои својството order, кое го одредува редоследот на следење на конкретните елементи според следното правило: оној кој има поголема вредност, стои поблиску до крајот на оската, а оној кој има помала - стои поблиску до почетокот.

Како вредност, својството може да прифати позитивен или негативен број. По стандард, сите елементи се следат еден по друг, што значи дека order кај нив е нула.

Ајде да го смениме редоследот на нашите елементи. За ова, на вториот элемент ќе доделиме дополнителна класа elem и за оваа класа ќе поставиме својство order со вредност 1:

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

Бидејќи сите елементи по стандард ќе имаат редослед 0, а нашиот втор элемент ќе има редослед поголем од останатите, тој ќе се позиционира после нив:

Сега ајде да зададеме негативна вредност -1:

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

Во овој случај, нашиот блок ќе се помести кон почетокот на оската:

Самостојно испробајте ја работата на ова својство за различни насоки на оската.