Kurs HTML

Zmiana wizualnej kolejności elementów

Domyślnie, elementy flex są wyświetlane w takiej samej kolejności, w jakiej występują w kodzie źródłowym HTML.

Właściwość order pozwala **zmienić tę wizualną kolejność** bez modyfikowania struktury HTML. Stosuje się ją bezpośrednio do **elementu flex**.

Elementy flex są sortowane na podstawie wartości ich właściwości order, od najmniejszej do największej. Elementy z taką samą wartością order zachowują swoją względną kolejność z kodu HTML.

Wartości order

Właściwość order przyjmuje wartości **liczbowe całkowite** (dodatnie, ujemne lub zero).

• Wartość domyślna: 0. Oznacza to, że jeśli nie ustawisz order, wszystkie elementy mają order: 0 i są wyświetlane zgodnie z kolejnością w HTML.
• Liczby ujemne: Elementy z ujemnym order (np. order: -1) pojawią się **przed** elementami z order: 0.
• Liczby dodatnie: Elementy z dodatnim order (np. order: 1) pojawią się **po** elementach z order: 0.
• Sortowanie: Elementy są sortowane rosnąco według wartości order. order: -2 pojawi się przed order: -1, które pojawi się przed order: 0, które pojawi się przed order: 1, itd.

Przykład:

<div class="container">
  <div class="item item-1">1 (HTML)</div>
  <div class="item item-2">2 (HTML)</div>
  <div class="item item-3">3 (HTML)</div>
  <div class="item item-4">4 (HTML)</div>
</div>Kopiuj

.container {
  display: flex;
  border: 1px solid black;
}

.item {
  padding: 20px;
  margin: 5px;
  background-color: lightblue;
  border: 1px solid navy;
}

/* Zmiana kolejności */
.item-1 { order: 2; background-color: lightcoral; } /* Będzie jako ostatni */
.item-2 { order: -1; background-color: lightgreen; } /* Będzie jako pierwszy */
.item-3 { order: 1; background-color: lightyellow; } /* Będzie jako trzeci */
.item-4 { /* order: 0; (domyślnie) */ } /* Będzie jako drugi */
Kopiuj

Wizualny efekt:

Jak widać, mimo że w HTML kolejność to 1, 2, 3, 4, wizualnie elementy ułożyły się w kolejności 2, 4, 3, 1, zgodnie z wartościami order (-1, 0, 1, 2).

Znaczenie dla dostępności (Accessibility)

Bardzo ważne: Właściwość order zmienia tylko **wizualną** kolejność renderowania elementów. **Nie zmienia** ona kolejności elementów w drzewie DOM ani kolejności, w jakiej elementy otrzymują fokus podczas nawigacji klawiaturą (np. klawiszem Tab).

Może to prowadzić do problemów z dostępnością, gdy wizualna kolejność znacząco różni się od logicznej kolejności w DOM. Użytkownicy nawigujący klawiaturą lub korzystający z czytników ekranu mogą doświadczać nielogicznych przeskoków fokusu.

Zalecenie: Używaj właściwości order oszczędnie i tylko wtedy, gdy zmiana wizualnej kolejności nie wpływa negatywnie na logiczny przepływ treści i nawigację. W miarę możliwości staraj się, aby kolejność w HTML odpowiadała pożądanej kolejności wizualnej.