Właściwość order i zmiana kolejności wizualnej
Nauczy się Pan/Pani zmieniać wizualną kolejność elementów flex bez modyfikowania DOM za pomocą właściwości order.
Właściwość order i zmiana kolejności wizualnej to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs CSS Academy zawiera 4 lekcji w sumie.
Właściwość order
Właściwość order zmienia wizualną kolejność elementów flex i grid bez modyfikowania struktury DOM. Domyślna wartość to 0; większe wartości pojawiają się później, a ujemne — wcześniej.
Podstawy order
Elementy są wyświetlane od wartości order o najmniejszej do największej. Elementy z taką samą wartością order są wyświetlane w kolejności DOM.
<div class="nav">
<span class="nav-button">Button</span>
<span class="nav-logo">Logo</span>
<span class="nav-links">Links</span>
</div>
Ujemna wartość order
Użyj wartości ujemnych, aby przenieść element przed wszystkie elementy z domyślną wartością (order:0):
<div class="list">
<div>Item 1</div>
<div class="sticky-first">Sticky</div>
<div>Item 2</div>
</div>
Zmiana kolejności responsywna
Zmieniaj kolejność wizualną w różnych punktach przerwania bez modyfikowania kodu HTML:
<div class="layout">
<main class="main-content">Main</main>
<aside class="sidebar">Sidebar</aside>
</div>
Ważne: ostrzeżenie dotyczące dostępności
order zmienia wyłącznie kolejność wizualną. Czytniki ekranu i nawigacja za pomocą klawiatury korzystają z kolejności DOM, a nie z kolejności wizualnej. Dla dostępności kluczowe jest zmienianie kolejności wizualnej przy zachowaniu logicznej kolejności odczytu w DOM.
Niespójność kolejności przechodzenia klawiszem Tab
Jeśli zmienisz wizualną kolejność elementów za pomocą order, fokus klawisza Tab będzie podążać za kolejnością DOM, która może różnić się od kolejności wizualnej. Powoduje to dezorientującą nawigację dla użytkowników klawiatury. Używaj zmiany kolejności wizualnej tylko wtedy, gdy nie zaburza ona logicznej sekwencji.
Typowe uzasadnione przypadki użycia
Zmiana kolejności wizualnej jest dopuszczalna, gdy:
- Elementy nie są częścią sekwencji, po której można nawigować (kolejność dekoracyjna)
- Kolejność wizualna odpowiada naturalnemu sposobowi czytania, który różni się od kolejności źródłowej z powodów związanych z organizacją kodu
order w Flexbox a order w Grid
Właściwość order działa tak samo we Flexbox i CSS Grid. Steruje kolejnością w ramach algorytmu układu, a nie kolejnością DOM.
order z flex-wrap
Gdy elementy przechodzą do nowych wierszy, order określa, które elementy pojawią się w poszczególnych wierszach oraz w jakiej kolejności w każdym z nich.
Odwracanie wszystkich elementów
Aby odwrócić wszystkie elementy, należy użyć flex-direction: row-reverse lub column-reverse zamiast ustawiania ujemnych wartości order dla każdego elementu. To rozwiązanie jest bardziej semantyczne i prostsze.
<div class="reversed-list">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
Animacje z użyciem order
Zmian właściwości order nie można animować w CSS. Jeśli potrzebują Państwo animowanego zmieniania kolejności, należy użyć transformacji lub animacji sterowanych przez JavaScript, takich jak Flip.js albo wtyczka Flip dla GSAP.
Szybkie sprawdzenie
Dlaczego należy zachować ostrożność przy używaniu właściwości order do zmieniania kolejności linków nawigacyjnych?
Podsumowanie
order zmienia wizualne położenie elementów flex/grid bez modyfikowania kodu HTML. Wartość domyślna to 0; niższe wartości pojawiają się wcześniej, a wyższe później. Należy używać tej właściwości do zmiany kolejności responsywnego układu bez zmieniania struktury DOM. Przy zmianie kolejności za pomocą order zawsze należy sprawdzić, czy kolejność nawigacji klawiaturą i kolejność odczytywania przez czytnik ekranu pozostają logiczne.
Ucz się CSS dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 40
- Lekcje
- 159
Często zadawane pytania
Czy lekcja „Właściwość order i zmiana kolejności wizualnej” jest bezpłatna?
Tak — pełny tekst „Właściwość order i zmiana kolejności wizualnej” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu CSS Academy, przejdź na CoddyKit PRO. Kurs CSS Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Właściwość order i zmiana kolejności wizualnej”?
Nauczy się Pan/Pani zmieniać wizualną kolejność elementów flex bez modyfikowania DOM za pomocą właściwości order. Ćwiczysz CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć CSS Academy?
Nie wymagamy żadnego doświadczenia. CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.
Ile czasu zajmuje lekcja „Właściwość order i zmiana kolejności wizualnej”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji CSS Academy?
Tak. Każda lekcja CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Nadpisywanie wyrównania elementu flex za pomocą align-self
- Właściwość order i zmiana kolejności wizualnej
- Wzorce skróconej właściwości flex
- Typowe układy Flexbox: nawigacja, karty i obiekt medialny