Kolejność bloków flex w CSS

Załóżmy, że mamy następujące bloki ustawione w rzędzie:

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

Zmieńmy kolejność ich wyświetlania na ekranie, nie zmieniając ich kolejności w kodzie HTML.

Służy do tego właściwość order, która określa kolejność konkretnych elementów według następującej zasady: ten, który ma większą wartość, znajduje się bliżej końca osi, a ten, który ma mniejszą - znajduje się bliżej początku.

Wartością właściwości może być liczba dodatnia lub ujemna. Domyślnie wszystkie elementy następują po sobie, co oznacza, że order jest u nich zerowy.

Zmieńmy kolejność naszych elementów. W tym celu ustawmy drugiemu elementowi dodatkową klasę elem i dla tej klasy ustawmy właściwość order na wartość 1:

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

Ponieważ wszystkie elementy domyślnie będą miały kolejność 0, a nasz drugi element będzie miał kolejność większą niż pozostałe, to będzie się znajdował za nimi:

Ustawmy teraz wartość ujemną -1:

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

W tym przypadku nasz blok przesunie się na początek osi:

Samodzielnie wypróbuj działanie tej właściwości dla różnych kierunków osi.