CSS'de order özelliği, Flexbox veya Grid konteyneri içindeki öğelerin görsel sıralamasını kontrol eder. Bu özellik, HTML yapısında öğelerin sıralamasını değiştirmeden, CSS ile görsel olarak öğelerin sırasını değiştirmenize olanak tanır. Özellikle duyarlı tasarımlar oluştururken, farklı ekran boyutlarında öğelerin sırasını değiştirmek için bu özellikten faydalanılır.

Varsayılan olarak, tüm Flexbox veya Grid öğelerinin order değeri 0dır. order özelliğine pozitif veya negatif tam sayı değerleri verilerek, öğelerin sıralaması değiştirilebilir. Daha düşük order değerine sahip öğeler daha önce, yüksek order değerine sahip öğeler ise daha sonra yerleştirilir.

Flexbox İçin Örnek:

HTML yapısı:

<div class="container">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
</div>

css:

.container {
  display: flex;
}

.item1 {
  order: 2; /* 3. sırada gösterilir */
}

.item2 {
  order: 1; /* 2. sırada gösterilir */
}

.item3 {
  order: 3; /* 1. sırada gösterilir */
}

Bu örnekte, .item3 HTML yapısında üçüncü sırada olmasına rağmen, order özelliği ile görsel olarak ilk sıraya taşınmıştır. Benzer şekilde, .item1 ve .item2nin sıralaması da değiştirilmiştir.

Grid İçin Örnek:

Grid düzenlerinde de order özelliği benzer şekilde kullanılabilir. Ancak, Grid düzeninde öğeler genellikle satır ve sütunlar arasında açıkça konumlandırıldığı için, order özelliğinin kullanımı daha az yaygındır.

order özelliği, özellikle farklı ekran boyutları için duyarlı tasarımlar oluştururken, içeriğin önem sırasını görsel olarak ayarlamak için kullanışlıdır. Bu, özellikle mobil cihazlarda önemli içeriğin daha görünür olmasını sağlamak için yararlı bir yöntemdir.

TailwindCSS: