Order
order ile öğelerin görüntülenme sırasını öğrenirsin.
order nedir?
order özelliği bir flex ögesinin görüntülenme sırasını değiştirir. Varsayılan değer 0'dır. Ögeler önce order değerine göre küçükten büyüğe sıralanır, sonra kaynak sırasına göre yerleşir.
Örneğin bir ögeye order: -1 verirsen en başa taşır; order: 1 verirsen en sona atar. Bu yalnızca görüntü sırasını değiştirir; HTML'deki yerini değiştirmez.
Negatif değerler ve görsel sıra
order değerleri negatif olabilir. -1, -2 gibi değerler ögeyi daha da öne taşır. Aynı order değerine sahip ögeler kaynak sırasına göre yerleşir.
order yalnızca görüntü sırasını değiştirir. Ekran okuyucular ve klavye ile gezinme yine HTML sırasını izler. Bu yüzden önemli içerikleri HTML'de doğru sırada tut, order'ı yalnızca görsel düzen için kullan.
Uygulama lead ögesini başa al
Bir .hero sınıfı içine yerleşen ögelere order bildirimi ekle. Birincil içerik için .hero .lead seçicisine order: -1 ver. Önceden tanımlı .hero kapsayıcısına dokunma.
Örnek çözümü göster
/* lead ögesini başa al */
.hero .lead {
order: -1;
}Kendini test et
-
Üç ögeli bir satırda ikinci ögeye order: -1 verilirse ne olur?
- Öge en başa taşır
- Öge en sona taşır
- Öge kaybolur
- Sıra değişmez
Cevabı göster
Öge en başa taşır — Doğru. order: -1, varsayılan 0'dan küçük olduğu için öge en başa taşır.
-
order: 1 bildirimini yaz
.highlight { ____: 1; }Cevabı göster
.highlight { order: 1; } -
Her order değerini etkisine eşle
- order: -1
- En başa atar
- order: 0
- Kaynak sırası
- order: 1
- Sona doğru öteler
- order: 2
- Daha geriye taşır