Własność CSS order umożliwia zmianę kolejności renderowania jednostek flex lub jednostek grid w kontenerze.
Nie ma ona wpływu na logiczną strukturę dokumentu HTML, a jedynie na jej warstwę wizualną. Oznacza to, że nie modyfikuje kolejności w innych rodzajach mediów niż wizualne, takich jak czytniki ekranu.
Wartości i składnia
Własność order
jako wartość przyjmuje liczbę całkowitą bez jednostki. Obsługuje zarówno wartości ujemne, jak i dodatnie. Im niższa wartość, tym bliżej początku kontenera znajduje się dany element. Wartość domyślna wynosi 0
.
Jeśli kilku elementom zostanie przypisana własność order
o takiej samej wartości, to elementy te tworzą tzw. grupę porządkową. W obrębie takiej grupy kolejność elementów jest ustalana na podstawie ich kolejności w kodzie źródłowym.
Przykłady
W poniższym przykładzie kolejność elementów HTML w kodzie źródłowym jest całkiem inna niż na ekranie.
Kod HTML:
<div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Kod CSS:
body > div {
display: flex;
}
div > div {
padding: 20px 40px;
margin: 5px;
border: 1px solid black;
font-size: 30px;
}
div div:nth-child(1) {order: 4}
div div:nth-child(2) {order: 1}
div div:nth-child(3) {order: 2}
div div:nth-child(4) {order: 3}
Za pomocą pseudoklasy CSS :nth-child() odwołujemy się kolejno do pierwszego, drugiego, trzeciego i czwartego elementu, zmieniając ich kolejność renderowania. Efekt tego jest następujący:

Podsumowanie
Zastosowanie | Jednostki flex i jednostki grid |
---|---|
Obsługiwane wartości | Ujemne i dodatnie liczby całkowite |
Wartość początkowa | 0 |
Dziedziczenie | Nie |
Specyfikacja CSS | CSS Display Module Level 3, order |