Flex Öğeleri Sıralama

Flexbox ve Grid gibi yeni düzen yöntemleri, içeriğin sırasını kontrol etme olanağını da beraberinde getirir.

Flexbox ve Grid gibi yeni düzen yöntemleri, içeriğin sırasını kontrol etme olanağını da beraberinde getirir. Bu makalede, Flexbox kullanırken içeriğinizin görsel düzenini değiştirebileceğiniz yollara göz atacağız. Ayrıca öğeleri yeniden sıralamanın erişilebilirlik açısından sonuçlarını da ele alacağız.

Öğeleri tersine çevirin

flex-direction özelliği dört değerden birini alabilir:

  • row
  • column
  • row-reverse
  • column-reverse

İlk iki değer, öğeleri belge kaynağı sıralamasında göründükleri sırada tutar ve başlangıç satırından itibaren sıralı olarak görüntüler.

The items are displayed in a row starting on the left.
The items are displayed as a column starting from the top

Son iki değer, başlangıç ve bitiş satırlarını değiştirerek öğeleri tersine çevirir.

The items are displayed in reverse order starting on the right-hand line.
The items are displayed in a column in reverse order starting at the bottom line.

Başlangıç çizgisinin (start line) yazma modlarıyla ilgili olduğunu unutmayın. Yukarıdaki örnekler, satır ve satır tersinin İngilizce gibi soldan sağa ilerleyen bir dilde nasıl çalıştığını göstermektedir. Arapça gibi sağdan sola bir dilde çalışıyorsanız, satır sağdan başlar, satır tersi ise soldan başlar.

Flex containers with Arabic letters showing how row starts from the right-hand side and row-reverse from the left.

Bu, öğeleri ters sırada görüntülemenin düzgün bir yolu gibi görünebilir, ancak öğelerin yalnızca görsel olarak ters sırada görüntülendiğine dikkat etmelisiniz. Belirtimler bu konuda şunları söylemektedir:

“Not: Flex düzeninin yeniden sıralama özellikleri kasıtlı olarak yalnızca görsel oluşturmayı etkiler, konuşma sırasını ve gezinmeyi kaynak sırasına göre bırakır. Bu, konuşma ve sıralı gezinme gibi doğrusal modeller için kaynak sırasını olduğu gibi bırakırken görsel sunumu değiştirmenize olanak tanır.” – Sıralama ve Yönlendirme

Öğeleriniz bağlantılar veya kullanıcının sekme ile ulaşabileceği başka bir öğe olsaydı, sekme sırası bu öğelerin belge kaynağında göründüğü sıra olurdu – görsel sıranız değil.

*-reverse değeri kullanıyorsanız veya öğelerinizi başka bir şekilde yeniden sıralıyorsanız, kaynaktaki mantıksal sırayı gerçekten değiştirmeniz gerekip gerekmediğini düşünmelisiniz. Belirtim, kaynağınızdaki sorunları düzeltmek için yeniden sıralama kullanmamanız konusunda bir uyarı ile devam eder:

“Yazarlar, flex-flow/flex-direction’ın order veya *-reverse değerlerini doğru kaynak sıralamasının yerine kullanmamalıdır, çünkü bu belgenin erişilebilirliğini bozabilir.”

Not: Firefox birkaç yıl boyunca kaynak sırasını değil görsel sırayı takip etmeye çalışarak diğer tarayıcılardan farklı davranmasına neden olan bir hataya sahipti. Bu hata artık düzeltildi. Tüm güncel kullanıcı aracıları spesifikasyonu takip edeceğinden ve bunu yapacağından, her zaman kaynak sırasını belgenin mantıksal sırası olarak almalısınız.

Aşağıdaki örnekte, flex-direction kullanarak sırayı değiştirirseniz, sekme sırasının öğelerin kaynakta listelendiği sırayı takip etmeye devam ettiğini görebilirsiniz.

.box {
  display: flex;
  flex-direction: row-reverse;
}
<div class="box">
    <div><a href="#">One</a></div>
    <div><a href="#">Two</a></div>
    <div><a href="#">Three</a></div>
</div>

Sıralama özelliği

Flex öğelerinin görsel olarak görüntülendiği sırayı tersine çevirmenin yanı sıra, tek tek öğeleri hedefleyebilir ve order özelliğini kullanarak görsel sıralamada göründükleri yeri değiştirebilirsiniz.

order özelliği, öğeleri sıralı gruplar halinde düzenlemek için tasarlanmıştır. Bunun anlamı, öğelere gruplarını temsil eden bir tamsayı atanmasıdır. Öğeler daha sonra bu tamsayıya göre görsel sıraya yerleştirilir, en düşük değerler önce gelir. Birden fazla öğe aynı tamsayı değerine sahipse, öğeler bu grup içinde kaynak sırasına göre yerleştirilir.

Örnek olarak, 5 flex öğemiz olsun ve sıralama değerlerini aşağıdaki gibi atayalım:

  • Kaynak öğe 1: order: 2
  • Kaynak öğe 2: order: 3
  • Kaynak öğe 3: order: 1
  • Kaynak öğe 4: order: 3
  • Kaynak öğe 5: order: 1

These items would be displayed on the page in the following order:

  • Kaynak öğe 3: order: 1
  • Kaynak öğe 5: order: 1
  • Kaynak öğe 1: order: 2
  • Kaynak öğe 2: order: 3
  • Kaynak öğe 4: order: 3
Items have a number showing their source order which has been rearranged.

Aşağıdaki örnekte değerlerle oynayabilir ve bunun sıralamayı nasıl değiştirdiğini görebilirsiniz. Ayrıca flex-direction’ı row-reverse olarak değiştirmeyi deneyin ve ne olduğunu görün – başlangıç çizgisi değiştirilir, böylece sıralama karşı taraftan başlar.

        .box {
          display: flex;
          flex-direction: row;
        }
        .box :nth-child(1) { order: 2; }
        .box :nth-child(2) { order: 3; }
        .box :nth-child(3) { order: 1; }
        .box :nth-child(4) { order: 3; }
        .box :nth-child(5) { order: 1; }
        <div class="box">
            <div><a href="#">1</a></div>
            <div><a href="#">2</a></div>
            <div><a href="#">3</a></div>
            <div><a href="#">4</a></div>
            <div><a href="#">5</a></div>
        </div>

Flex öğelerinin varsayılan order değeri 0‘dır, bu nedenle 0’dan büyük bir tamsayı değerine sahip öğeler, açık bir sıra değeri verilmemiş tüm öğelerden sonra görüntülenecektir.

Ayrıca, oldukça kullanışlı olabilen negatif değerleri de order ile kullanabilirsiniz. Bir öğenin önce görüntülenmesini ve diğer tüm öğelerin sırasının değişmemesini istiyorsanız, bu öğeye -1 sırası verebilirsiniz. 0‘dan küçük olduğu için öğe her zaman önce görüntülenecektir.

Aşağıdaki örnekte Flexbox kullanarak yerleştirilmiş öğelerimiz var. HTML’de active sınıfının atandığı öğeyi değiştirerek, hangi öğenin önce görüntüleneceğini ayarlayabiliriz. Böylece düzenin en üstünde tam genişlikte istediğimiz öğe olur, diğer öğeler ise onun altında görüntülenir.

        .box {
          display: flex;
          flex-wrap: wrap;
          flex-direction: row;
        }
        .active {
            order: -1;
            flex: 1 0 100%;
        }
        <div class="box">
            <div><a href="#">1</a></div>
            <div><a href="#">2</a></div>
            <div class="active"><a href="#">3</a></div>
            <div><a href="#">4</a></div>
            <div><a href="#">5</a></div>
        </div>

Öğeler, spesifikasyonda sırası-değiştirilmiş belge sırası olarak tanımlanan şekilde görüntülenir. Öğeler görüntülenmeden önce order özelliğinin değeri dikkate alınır.

order aynı zamanda öğelerin boyama sırasını da değiştirir; order için daha düşük bir değere sahip öğeler önce boyanır ve order için daha yüksek bir değere sahip olanlar daha sonra boyanır.

order özelliği ve erişilebilirlik

order özelliğinin kullanımı, flex-direction ile yönün değiştirilmesindeki gibi, erişilebilirlik açısından tamamen benzer etkilere sahiptir. order kullanımı, öğelerin boyanma sırasını ve görsel olarak görünme sırasını değiştirir. Ancak, öğelerin sıralı gezinme düzenini değiştirmez. Bu nedenle, bir kullanıcı öğeler arasında sekme ile geçiş yapıyorsa, kendilerini düzeninizde çok kafa karıştırıcı bir şekilde atlarken bulabilirler.

Bu sayfadaki örneklerden herhangi birinde sekme yaparak, düzenin bir tür işaretleme cihazı kullanmayan herkes için potansiyel olarak nasıl garip bir deneyim yarattığını görebilirsiniz. Görsel düzen ile mantıksal düzen arasındaki bu kopukluk ve erişilebilirlik açısından ortaya çıkardığı bazı potansiyel sorunlar hakkında daha fazla bilgi edinmek için aşağıdaki kaynaklara (İngilizce) bakabilirsiniz.

order nerelerde kullanılmalı

Bazen flex öğelerinin mantıksal ve görsel sıralamalarının ayrı olmasının yararlı olduğu yerler vardır. Dikkatli kullanıldığında order özelliği, bazı faydalı ortak modellerin kolayca uygulanmasına olanak sağlayabilir.

Örneğin bir haber öğesini gösterecek bir kart tasarımınız olabilir. Haber öğesinin başlığı vurgulanması gereken en önemli şeydir. Bu öğe okumak istediği içeriği bulmak için başlıklar arasında sekme yapan bir kullanıcının atlayabileceği öğe olacaktır. Kartın bir de tarihi olabilir; mesela aşağıdaki gibi:

A design component with a date, then heading and then content.

Görsel olarak tarih, kaynakta başlığın üzerinde görünür. Ancak, kart bir ekran okuyucu tarafından okunuyorsa, önce başlığın ve ardından yayın tarihinin duyurulmasını tercih ederdim. Bunu order özelliğini kullanarak yapabiliriz.

Kart, flex-direction değeri column olarak ayarlanmış flex konteynerimiz olacak. Daha sonra tarihe -1‘lik bir sıra veriyorum. Bu da onu başlığın üstüne çekiyor.

        .card {
            display: flex;
            flex-direction: column;
        }
        .date {
                order: -1;
                text-align: right;
            }
    
     <div class="wrapper">
        <div class="card">
            <h3>News item title</h3>
            <div class="date">1 Nov 2017</div>
            <p>This is the content of my news item. Very newsworthy.</p>
        </div>
        <div class="card">
            <h3>Another title</h3>
            <div class="date">6 Nov 2017</div>
            <p>This is the content of my news item. Very newsworthy.</p>
        </div>
    </div>
  

Bu küçük değişiklikler, order özelliğinin anlamlı olduğu türden durumlardır. Mantıksal sırayı belgenin okuma ve sekme sırası olarak tutun ve bunu en erişilebilir ve yapılandırılmış şekilde koruyun. Ardından sıralamayı tamamen görsel tasarım değişiklikleri için kullanın. Bunu yaparken, kullanıcı sekmeler arasında gezinirken klavye ile erişilebilecek öğeleri yeniden sıralamamaya dikkat edin. Özellikle yeni düzen yöntemleri denerken ve tarayıcı testlerinizi yaparken siteyi fare veya dokunmatik ekran yerine yalnızca klavye kullanarak test etmeyi denediğinizden de emin olmalısınız. Geliştirme tercihlerinizin içerikte dolaşmayı zorlaştırıp zorlaştırmadığını hızlıca göreceksiniz.

Bu yazı topluluk tarafından oluşturuldu. Lisans bilgisine bakabilirsiniz. Yanlış veya eksik bilgileri düzenlemek için github üzerinden katkıda bulunabilirsiniz.

Kategoriler: CSS Flexbox, CSS, Kılavuz

Okumaya devam et!
Sonraki Yazı: Flex Öğeleri Boyutlandırma

Bu kılavuzda, flex öğelerine uygulanan ve ana eksen boyunca öğelerin boyutunu ve esnekliğini kontrol etmemizi sağlayan üç özelliği inceleyeceğiz: flex-grow, flex-shrink ve flex-basis.

Metin ve resmi dikey olarak ortada hizalamak

Aşağıdaki gibi bir html bloğu ile çalıştığımızı düşünelim.

Flexbox’ın diğer düzen yöntemleriyle ilişkisi

Bu makalede Flexbox’ın diğer tüm CSS modülleriyle nasıl uyum sağladığına bir göz atacağız.

Medya sorguları için başlangıç kılavuzu

CSS Medya Sorgusu, CSS’yi yalnızca tarayıcı ve cihaz ortamı belirttiğiniz bir kuralla eşleştiğinde, örneğin “görüntü alanı 480 pikselden daha geniş olduğunda” uygulamanız için bir yol sunar.

CSS Flexbox

Flexbox nedir ile başlayalım.

Yorum Gönderin

E-posta hesabınız yayımlanmayacak.

koddla
Tema Mundana by WowThemes.net.