css

صفت order – آموزش CSS

با استفاده از این صفت شما می توانید ترتیب قرار گیری عناصر را مشخص کنید.


این صفت استفاده ی چندانی ندارد. فرض می کنیم شما چند بخش (باکس) دارید حالا اگر بخواهید جای دومی و سومی را با هم عوض کنید می توانید از این صفت استفاده کنید.برای درک بهتر این صفت به مثال زیر توجه کنید.

در HTML :

<div class="asli">
<div style="background-color:red;" class="red"></div>
<div style="background-color:blue;" class="blue"></div>
<div style="background-color:green;" class="green"></div>
<div style="background-color:yellow;" class="yellow"></div>
</div>

در CSS :

.asli{
width: 400px;
height: 150px;
display: flex;
}

.asli > div {
width: 70px;
height: 70px;
}
div.red {order: 2;}
div.blue {order: 4;}
div.green {order: 3;}
div.yellow{order: 1;}

نتیجه:

قرمز
آبی
سبز
زرد

در این جا ما چهار عدد div تعریف کرده ایم با استفاده از کلاس ها طول و عرض به آن ها داده ایم و به صورت Internal رنگ برایشان در نظر گرفته ایم. همان طور که میبینید عنصر اول باید باکس قرمز رنگ باشد ولی با استفاده از صفت order در جای دوم قرار گرفته است.

Related Articles

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

این مطلب را از دست ندهید!

Close
Close