CSS Academy · Ders

order Özelliği ve Görsel Yeniden Sıralama

order özelliğini kullanarak DOM'yi değiştirmeden flex ögelerinin görsel sırasını değiştirin.

2. ders / 413 adım

order Özelliği ve Görsel Yeniden Sıralama, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. CSS Academy kursu toplamda 4 dersten oluşur.

order Özelliği

order özelliği, DOM yapısını değiştirmeden esnek ve ızgara öğelerinin görsel sırasını değiştirir. Varsayılan değer 0’dır; daha yüksek değerler daha sonra görünür, negatif değerler daha önce görünür.

order Temelleri

Öğeler, en düşük order değerinden en yüksek değere doğru görüntülenir. Aynı order değerine sahip öğeler DOM sırasına göre görünür.

<div class="nav">
  <span class="nav-button">Button</span>
  <span class="nav-logo">Logo</span>
  <span class="nav-links">Links</span>
</div>

Negatif order

Bir öğeyi tüm varsayılan (order:0) öğelerin önüne taşımak için negatif değerler kullanın:

<div class="list">
  <div>Item 1</div>
  <div class="sticky-first">Sticky</div>
  <div>Item 2</div>
</div>

Duyarlı Yeniden Sıralama

HTML’yi değiştirmeden farklı kırılma noktalarında görsel sırayı değiştirin:

<div class="layout">
  <main class="main-content">Main</main>
  <aside class="sidebar">Sidebar</aside>
</div>

Önemli: Erişilebilirlik Uyarısı

order yalnızca görsel sırayı değiştirir. Ekran okuyucuları ve klavye gezinmesi görsel sırayı değil, DOM sırasını izler. DOM’u mantıksal okuma sırasını koruyacak şekilde düzenlerken görsel sıralamayı değiştirmek erişilebilirlik açısından kritik öneme sahiptir.

Sekme Sırası Tutarsızlığı

Öğeleri order ile görsel olarak yeniden sıralarsanız, klavye Sekme odağı görsel sıradan farklı olabilen DOM sırasını izler. Bu durum, klavye kullanıcıları için kafa karıştırıcı bir gezinme oluşturur. Görsel yeniden sıralamayı yalnızca mantıksal sırayı bozmadığı durumlarda kullanın.

Yaygın ve Uygun Kullanım Alanları

Görsel yeniden sıralama şu durumlarda kabul edilebilir:

Öğeler gezinilebilir bir sıranın parçası değilse (dekoratif sıralama)
Kod düzenleme nedenleriyle kaynak sırasından farklı olan görsel sıra, doğal bir okuma akışıyla örtüşüyorsa

Esnek Kutu Düzeni ve CSS Grid Sıralaması

order özelliği hem esnek kutu düzeninde hem de CSS Grid’de aynı şekilde çalışır. DOM’u değil, yerleşim algoritması içindeki sırayı denetler.

flex-wrap ile order

Öğeler yeni satırlara sarıldığında order, hangi öğelerin hangi satırda ve her satır içinde hangi sırayla görüneceğini belirler.

Tüm Öğeleri Ters Çevirme

Tüm öğeleri ters çevirmek için her öğeye negatif sıra değerleri vermek yerine flex-direction: row-reverse veya column-reverse kullanın. Bu yaklaşım daha anlamsal ve daha basittir.

<div class="reversed-list">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

order ile Animasyon

order değişiklikleri CSS'te animasyonla gösterilemez. Animasyonlu yeniden sıralamaya ihtiyacınız varsa dönüşümleri veya Flip.js ya da GSAP'in Flip eklentisi gibi JavaScript tarafından yönetilen animasyonları kullanın.

Hızlı Kontrol

Gezinme bağlantılarını yeniden sıralamak için order özelliği neden dikkatli kullanılmalıdır?

İnteraktif derste cevapla

Özet

order, HTML'e dokunmadan flex/ızgara öğelerinin görsel konumunu değiştirir. Varsayılan değer 0'dır; daha düşük değerler önce, daha yüksek değerler sonra görünür. HTML yapısını değiştirmeden duyarlı yeniden sıralama yapmak için kullanın. Yeniden sıralama için order kullandığınızda klavye gezinmesinin ve ekran okuyucu sırasının mantıklı kalıp kalmadığını her zaman doğrulayın.

Başlamak ücretsiz

Yapay zeka eğitmeniyle CSS öğren — ücretsiz

Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.

Kurslar: 40
Dersler: 159

Ücretsiz öğrenmeye başla Tüm kursu görüntüle

Sıkça Sorulan Sorular

“order Özelliği ve Görsel Yeniden Sıralama” dersi ücretsiz mi?

Evet — “order Özelliği ve Görsel Yeniden Sıralama” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. CSS Academy kursu toplamda 4 dersten oluşur.

“order Özelliği ve Görsel Yeniden Sıralama” dersinde ne öğreneceğim?

order özelliğini kullanarak DOM'yi değiştirmeden flex ögelerinin görsel sırasını değiştirin. CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

CSS Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.

“order Özelliği ve Görsel Yeniden Sıralama” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu CSS Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

align-self ile Flex Ögesi Hizalamasını Geçersiz Kılma
order Özelliği ve Görsel Yeniden Sıralama
Flex Kısa Gösterim Kalıpları
Yaygın Flexbox Yerleşimleri: Gezinme, Kartlar, Medya Nesnesi

← CSS Academy Sayfasına Dön