Редослед флекс блокова у 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;
}

У том случају ће наш блок прећи на почетак осе:

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