Парадак 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;
}

У гэтым выпадку наш блок перамясціцца да пачатку восі:

Самастойна выпрабуйце працу дадзенай уласцівасці для розных напрамкаў восі.