این آموزش در تاریخ ۱۴۰۰/۱۱/۰۹ آپدیت شده است.
آموزش ویژگی order در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی order در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی order در CSS
با استفاده از ویژگی order در CSS میتوان یک یا چندین آیتم از فلکس باکس ( Flex Box ) را بصورت سفارشی ترتیب چیدمان شان را مشخص و یا تعریف کرد، مثلا میتونیم مشخص کنیم که آیتم شماره ۱ در جایگاه شماره ۳ از ظرف فلکس قرار بگیرد و…
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از ویژگی order را در زبان CSS مشاهده نمایید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.order1 { order: 5; } .order2 { order: 4; } .order3 { order: 3; } .order4 { order: 2; } .order5 { order: 1; } |
Free-Learn
جدول مشخصات ویژگی order در CSS
در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.
| مقدار پیش فرض | ۰ |
|---|---|
| قابل ارث بری | ندارد | اطلاعات بیشتر |
| قابل متحرک سازی | دارد | اطلاعات بیشتر |
| نسخه | CSS3 |
| نحوه استفاده در جاوااسکریپت | object.style.order=”2″; |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی order در CSS پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | Edge |
| order | ۲۹ | ۲۸ | ۱۲ | ۹ | ۱۲ |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.
|
1 |
order: number|initial|inherit; |
Free-Learn
جدول مقادیر ویژگی order در CSS
در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| number | یک عدد که جایگاه قرار گیری آیتم را مشخص میکند ( مقدار پیش فرض ۰ ) |
| initial | استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر |
| inherit | استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر |
Free-Learn
نکات و توضیحات
- یک عنصر باید حتما آیتم یا فرزندی از یک فلکس باکس باشد تا ویژگی order بروی آن اثر داشته باشد، در غیر اینصورت این ویژگی بی اثر خواهد ماند.
