CSS Flexbox: Order Nedir?

eminbasbayan

2 dk okuma

🔍 Büyütmek için tıklayın

İçindekiler

Bu yazıda neler var?

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.

TEXT?

Ö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

Özellik	Açıklama
`order`	Flex öğelerin görsel sırasını CSS ile değiştirmenizi sağlar.
Varsayılan Değer	0
Negatif Değer	Öğeyi başa alır
Pozitif Değer	Öğeyi sona atar

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.