CSS Flexbox: Order Nedir?

Flexbox, web sayfalarında öğeleri esnek ve düzenli bir şekilde hizalamamızı sağlar. Flexbox’ın sunduğu en ilginç özelliklerden biri de order özelliğidir.

Peki order tam olarak ne işe yarar?

order Nedir?

order, flex container içindeki öğelerin sırasını CSS üzerinden değiştirmeye yarar. Yani HTML’deki sıralamayı bozmadan, görsel olarak öğeleri farklı bir düzende gösterebilirsiniz.

Önemli: HTML’de hangi sırada yazılırsa yazılsın, order sayesinde öğelerin görünme sırasını kontrol edebilirsin.

Varsayılan Değeri Nedir?

Tüm flex öğelerinin varsayılan order değeri 0’dır. Bu durumda öğeler, HTML’de yazıldıkları sıraya göre görünürler.

Eğer bir öğeye order: -1 verirseniz, o öğe diğerlerinden önce görünür.
Daha yüksek bir değer (örneğin order: 2) verirseniz, o öğe en sona kayar.

Örnek Kullanım

Aşağıdaki HTML yapısında 5 kutu var:

<div class="container">
  <div class="box">A</div>
  <div class="box">B</div>
  <div class="box">C</div>
  <div class="box">D</div>
  <div class="box">E</div>
</div>

Şimdi bu kutuların sırasını CSS ile değiştirelim:

.container {
  display: flex;
  gap: 10px;
}

.box {
  width: 60px;
  height: 60px;
  background-color: #4caf50;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
}

/* D kutusu en başa alınır */
.container div:nth-of-type(4) {
  order: -1;
}

/* B kutusu en sona alınır */
.container div:nth-of-type(2) {
  order: 3;
}

Sonuç:

• Normalde sırası: A, B, C, D, E
• Yeni sırası: D, A, C, E, B

Neden Kullanılır?

• Mobil ve masaüstü görünümde içerik sırasını değiştirmek için
• Erişilebilirlik açısından önemli içerikleri öne çıkarmak için
• HTML yapısını bozmadan içerik sıralamasını kontrol etmek için

Dikkat Edilmesi Gerekenler

• order sadece flex container içindeki öğelerde çalışır.
• order değeri negatif olabilir.
• Sıralama değeri ne kadar küçükse, öğe o kadar önce görünür.

Özet

Flexbox’ın order özelliği sayesinde sıralama artık sadece HTML’nin işi değil!
Karmaşık düzenlerde işleri kolaylaştıran bu özelliği projelerinizde mutlaka deneyin.