Ред на 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;
}

В този случай нашият блок ще се премести в началото на оста:

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