Właściwość CSSFlexbox
order
Zmienia kolejność wyświetlania elementu w kontenerze flex lub grid.
- Wartość domyślna
0- Dziedziczona
- Nie
- Animowalna
- tak, jako liczba całkowita
- Dotyczy
- elementy flex i elementy grid
- JavaScript
element.style.order = "-1"
Przykład
#CSS
.layout {
display: flex;
flex-direction: column;
}
.layout .notice {
order: -1;
}HTML przykładu
<div class="layout stage" style="gap: 8px;">
<p style="margin: 0">Treść lekcji o Flexboxie.</p>
<p class="notice" style="margin: 0; color: #fbbf24;">Uwaga: nowa wersja lekcji!</p>
</div>Podgląd
Definicja i zastosowanie
#Właściwość order przyjmuje liczbę całkowitą. Elementy wyświetlają się od najniższej do najwyższej wartości, a przy równych wartościach decyduje kolejność w kodzie. Domyślnie wszystkie mają 0.
Dzięki temu możesz przestawić elementy tylko wizualnie, na przykład przenieść panel boczny nad treść na telefonie albo wyróżnić jedną kartę, stawiając ją na początku.
Kolejność czytania przez technologie asystujące i nawigacji klawiszem Tab się nie zmienia. Duże przestawienia mogą więc dezorientować użytkowników klawiatury.
Składnia
#Składnia
order: <liczba całkowita>;Wartości
#Wartości w praktyce
#0
Wartość domyślna: kolejność z kodu.
.target { order: 0; }-1
Element 3 przeskakuje na początek.
.target { order: -1; }1
Element 3 przechodzi na koniec, za elementy z order 0.
.target { order: 1; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Jeśli kolejność ma znaczenie dla sensu treści, zmień ją w kodzie HTML, a nie przez
order. - Stosuj małe liczby, na przykład -1, 0 i 1. Łatwiej wtedy ogarnąć, co gdzie trafi.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.