صفت order

صفت order

توسط / CSS / دوشنبه, 06 شهریور 1396 ساعت 12:47

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

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

در 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 در جای دوم قرار گرفته است.

نویسنده

حسین منتظرتبریزی

حسین منتظرتبریزی

دانشجوی رشته ی نرم افزار علاقه مند به برنامه نویسی ،بازی سازی و طراحی سایت

نظر دادن

جهت شرکت در دوره  رایگان  7 اصل مدیریت مطلوب کسب و کار لطفا نام و ایمیل خود را وارد نمایید


ایران آکادمی را در شبکه های مجازی دنبال کنید:

کلیه حقوق مادی و معنوی این وب سایت متعلق به ایران آکادمی می‌باشد. قوانین این وب سایت، مبتنی بر قوانین جاری جمهوری اسلامی ایران است. © ۱۳۹۶

Please publish modules in offcanvas position.