Kullanıcı arayüzünün sezgisel ve çekici olması önemlidir. Bunun elde edilmesinin bir yolu, CSS'de Flexbox kullanmaktır. Flexbox sayesinde sadece öğelerin konumunu ve yerini değil aynı zamanda öğelerin görünürlüğünü ve sıralamasını da değiştirebilirsin, aynı zamanda DOM'u (Document Object Model) etkilemeden. Bu öğretici sayesinde CSS özelliği order hakkında daha detaylı bir bakış atacağız, bu özellik sayesinde Flexbox öğelerinin sırasını değiştirebilir ve öğelerin görüntülenme sırasını tersine çevirme için flex-direction'ı nasıl kullanacağını öğreneceksin.
En Önemli Bilgiler
- CSS özelliği order, Flexbox öğelerinin görünen sırasını etkiler.
- order sırasındaki değişiklikler, DOM'daki orijinal sırayı etkilemez.
- Flexbox yönü, görüntüleme sırasını değiştirmek için flex-direction'ı tersine çevirerek (örneğin, row-reverse) kullanılabilir.
Adım Adım Kılavuz
Order özelliğinin nasıl çalıştığını ve flex-direction ile görüntüyü tersine çevirme yeteneğini göstermek için aşağıdaki adımları takip edeceğiz:
1. Flexbox Temelleri Oluşturma
İlk olarak, konteynerinizin Flexbox özelliklerine sahip olduğundan emin olmalısınız. Bunun için CSS kuralı display: flex; i container düğmesine ekleyin.
2. DOM'daki Öğe Sırasını Anlama
DOM'unuzdaki öğelerin orijinal sırasına bakın. DOM'daki varsayılan sıra, Flexbox Order'ın üzerine inşa edildiği başlangıç noktasıdır.
3. Order Özelliğini Kullanma
Öğelerin görünümünü etkilemek için order özelliğini negatif değerlere ayarlayabilirsiniz. Öğeler varsayılan olarak değeri 0'a sahiptir. Bir öğeye -1 değerini atarsanız, görsel olarak öne çekilir.
4. Görsel Sıralama Uygulama
İlk öğeyi görsel olarak özelleştirmek istediğinizde aşağıdakilere dikkat etmelisiniz: order özelliği için varsayılan değer 0'dır. Bir öğeyi diğerinden önde göstermek için daha küçük bir değer seçmelisiniz. -1, -2 veya hatta negatif yüzler değer atamak mümkündür.
5. Diğer Ayarları Yapma
Kalan öğelerin order değerlerini değiştirin. Örneğin, ikinci elemanı ilk sıraya koymak istiyorsanız, -1 değeri atamalı veya mevcut order değerinden daha küçük bir değerle beslemelisiniz.
6. Negatif Order Değeri Kullanma
Bir sıralamayı değiştirmek için order özelliğini kullanıyorsanız, görsel sıralama küçükten büyüğe doğru sıralanır, en küçük değer önce gelir.
7. Flex-Direction Tersine Çevirme
En güçlü araçlardan biri, flex-direction özelliğidir. Bunu row-reverse olarak ayarlarsanız, sıra sağdan sola doğru değişir. Bu değişiklikte öğelerin nasıl görsel olarak yerleştirildiğini kontrol edin.
8. Order Değişikliğini Ters Yönde Uygulama
flex-direction: column; özelliğini kullandığınızda, düzen yukarıdan aşağıya doğru işlenir. Bu durumda sırayı etkilemek için negatif order özniteliği de kullanılabilir.
9. Ekran Okuyucusuna Uygulama
Görsel sıralamayı ekran okuyucusu için düşünmek istiyorsanız, ekran okuyucusunun orijinal DOM sırasını okuyacağını bilmek önemlidir. Bu nedenle order ile yapılan görsel değişiklikler tüm kullanıcılar için erişilebilir değildir.
Özet
Bu kılavuzda, Flexbox öğelerinin görünürlüğünü ve sıralamasını kontrol etmek için CSS özelliği olan order'ı nasıl kullanacağını öğrendin. Ayrıca, flex-direction'ı tersine çevirerek düzenlerini daha esnek ve kullanıcı dostu hale getirebileceğini keşfettin. Görsel uyarlamaların, görünümde herhangi bir değişikliğe neden olmadığını, bu durumun erişilebilirlik kapsamında dikkate alınması gerektiğini unutma.
Sık Sorulan Sorular
order özelliği nasıl çalışır?order özelliği, Flexbox öğelerinin görünür sırasını etkiler. Daha düşük bir değer önce gösterilir.
Flex-Direction'ı nasıl tersine çevirebilirim?Gösterim sırasını değiştirmek için flex-direction özelliğini row-reverse veya column-reverse olarak ayarla.
order özelliği DOM sırasını etkiler mi?Hayır, order özelliği sadece öğelerin görsel görünümünü değiştirir, DOM sırasını değil.
order değerleri aynı olduğunda ne olur?Order değerleri aynı olduğunda, görüntülemek için orijinal DOM sırası kullanılır.
Ekran okuyucularıyla nasıl başa çıkmalıyım?Ekran okuyucular DOM sırasını okur, bu nedenle görsel düzenlemenin tüm kullanıcılar için erişilebilir kalmasını sağlamalısın.
