طريقة استخدام خاصية order في CSS3 و أمثلة

يحدد خاصية order في CSS ترتيب العناصر في وحدة Flexbox وكيفية تنسيقها. يتم ترتيب العناصر بناءً على القيمة الافتراضية في ترتيب تصاعدي. يتم ترتيب العناصر التي لها نفس القيمة الافتراضية بناءً على ترتيبها في الكود المصدر.

الجدول أدناه يوضح كيفية استخدام هذه الخاصية و سجلات إصداراتها، بالإضافة إلى استخدام الخاصية في لغة الجافاسكربت.

استخدام نحو order

قواعد النص التالية لهذه الخاصية:

order: integer | initial | inherit

المثال التالي يعرض كيفية استخدام خاصية order.

.flex-container  {
　　　　border: 2px solid #000;
　　　　display: -webkit-flex; /* Safari 6.1+ */
　　　　display: flex;
}　
.item1  {
　　　　width: 100px;
　　　　background: #ff80c0;
　　　　-webkit-order: 2; /* Safari 6.1+ */
　　　　order: 2;
}
.item2  {
　　　　width: 100px;
　　　　background: #8080ff;
　　　　-webkit-order: 1; /* Safari 6.1+ */
　　　　order: 1;
}
.item3  {
　　　　width: 100px;
　　　　background:#0080ff;
}

قيمة الخاصية

جدول التالي يصف قيم هذه الخاصية.

توافق المتصفح

متوافق مع متصفحات الـ order الخاصية، الأرقام في الجدول التالي تعكس أحدث إصدار من المتصفح الذي يدعم هذه الخاصية؛ جميع المتصفحات الشائعة يدعمون هذه الخاصية.

قراءة إضافية

يرجى الرجوع إلى الدليل التالي:خط CSS،وحدات CSS،عناصر خيالية CSS。

خصائص مرتبطة: align-content, align-items, align-self, display, flex, flex-basis, flex-direction, flex-flow, flex-grow, flex-shrink, flex-wrap, justify-content, min-height, min-width, order.