CSS Konuları
CSS Order
18/05/2023
order özelliği HTML elemanlarının sıralanması için kullanılır.
Bir <div> etiketi içerisinde bulunan elemanları order özelliği ile sıralarken <div> etiketinin display: flex; ve flex-wrap: wrap; özelliklerine sahip olması gerekir.
CSS Order Eklenmemiş Yapı
<style>
.row {display: flex; flex-wrap: wrap;}
.box1, .box2, .box3 {height: 50px; width: 100%;}
.box1 {border: 1px solid #000; background-color: #000;}
.box2 {border: 1px solid #883d3d; background-color: #883d3d;}
.box3 {border: 1px solid gray; background-color: gray;}
</style>
<div class="row">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>CSS Order Eklenmiş Yapı
<style>
.row {display: flex; flex-wrap: wrap;}
.box1, .box2, .box3 {height: 50px; width: 100%;}
.box1 {border: 1px solid #000; background-color: #000;}
.box2 {border: 1px solid #883d3d; background-color: #883d3d;}
.box3 {border: 1px solid gray; background-color: gray;}
.order1 {order: 1;}
.order2 {order: 2;}
.order3 {order: 3;}
</style>
<div class="row">
<div class="box1 order2"></div>
<div class="box2 order3"></div>
<div class="box3 order1"></div>
</div>