الخاصية order

الخاصية order في CSS تُحدِّد ترتيب عناصر flex في الحاوية، إذ ستُرتَّب العناصر ترتيبًا تصاعديًا اعتمادًا على قيمة الخاصية order المُسندَة إليها، والعناصر التي لها نفس القيمة ستُرتَّب وفق ورودها في الشيفرة المصدرية.

بطاقة الخاصية

القيمة الابتدائية	0
تُطبَّق على	حاويات flex.
قابلة للوراثة	لا
قابلة للتحريك	نعم
القيمة المحسوبة	كما حُدِّدَت.

/* القيم العددية، بما في ذلك الأعداد السالبة */
order: 5;
order: -5; 

/* القيم العامة */
order: inherit;
order: initial;
order: unset;

ملاحظة: الغرض من الخاصية order هو التأثير على الترتيب المرئي للعناصر، وليس الترتيب المنطقي أو التنظيمي، ولا يجوز استخدام الخاصية order على البيانات غير المرئية، مثل النص المقروء صوتيًا.

أمثلة

بفرض أنَّ لدينا مستند HTML يتألف من قسمٍ لترويسةِ الصفحة <header> ومقالة <article> ومربع تنقل <nav> ومربع جانبي <aside> وتذييل <footer>، وكانت شيفرة HTML كالآتية:

<header>...</header>
<div id='main'>
  <article>مقالة</article>
  <nav>التنقل</nav>
  <aside>في الجانب</aside>
</div>
<footer>...</footer>

لاحظ أنَّ ترتيب القسم الرئيسي في الصفحة هو <article> ثم <nav> ثم <aside>، لكننا نريد تغيير ترتيب الظهور لكي يُعرَض الشريط الجانبي أولًا (على الطرف الأيسر إذا كان اتجاه الصفحة ltr)، وسنستخدم الخاصية order لفعل ذلك كما في شيفرة CSS الآتية:

#main { display: flex;  text-align: center; }
#main > article { flex: 1;       order: 2; }
#main > nav     { width: 200px;  order: 1; }
#main > aside   { width: 200px;  order: 3; }

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	29.0	20.0	11	12.5	9.0

الإصدارات القديمة من بعض المتصفحات (مثل Chrome و IE و Safari) كانت تدعم flexbox لكن مع استخدام سابقة (-webkit- أو -ms-).

البنية العامة

تقبل الخاصية order قيمةً واحدةً من الكلمات المحجوزة التالية.

<integer>

ستوضع عناصر flex في سطرٍ وحيد، مما قد يسبب في خروج المحتوى من حاويته إن لم تكن تتسع له.

البنية الرسمية

order: <integer>;

انظر أيضًا

• صفحة الخاصية flex صفحة الخاصيات الفرعية التي تضبطها هذه الخاصية وهي: flex-basis، و flex-direction، و flex-flow، و flex-grow، و flex-shrink، و flex-wrap
• صفحة الخاصية grid التي  تضبط جميع الخاصيات التي تُحدَّد خصائص الشبكة بوضوح.
• صفحة الخاصية justify-content التي تعرِّف طريقة توزيع المتصفح للمسافة بين العناصر وحولها على امتداد المحور الرئيسي من حاوية flex.

مصادر ومواصفات

• مواصفة CSS Flexible Box Layout Module.