Własność CSS order

> Dodaj do ulubionych

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:

Efekt działania własności CSS order

Podsumowanie

ZastosowanieJednostki flex i jednostki grid
Obsługiwane wartościUjemne i dodatnie liczby całkowite
Wartość początkowa0
DziedziczenieNie
Specyfikacja CSSCSS Display Module Level 3, order
Jajko z dzwonkiem

Podoba Ci się ta strona?

Pomóż nam się rozwijać, wykupując płatne konto. Dzięki temu będziemy mogli tworzyć dla Ciebie jeszcze więcej ciekawych treści, a Ty pozbędziesz się reklam.