Jump to content
Üyelik kaydınızı yaparak son yazılan içeriklerden haberdar olun! ×

CSS

  • entries
    53
  • comments
    0
  • views
    1,341

CSS'de order özelliği ve TailwindCSS Sınıf Karşılığı


Doğuhan ELMA

51 views

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:

Class
Properties
order-1 order: 1;
order-2 order: 2;
order-3 order: 3;
order-4 order: 4;
order-5 order: 5;
order-6 order: 6;
order-7 order: 7;
order-8 order: 8;
order-9 order: 9;
order-10 order: 10;
order-11 order: 11;
order-12 order: 12;
order-first order: -9999;
order-last order: 9999;
order-none order: 0;

 

1.png

0 Comments


Recommended Comments

There are no comments to display.

Guest
Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...