CSS/order

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

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

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

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

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

أمثلة

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

<header>...</header>
<div id='main'>
  <article>Article</article>
  <nav>Nav</nav>
  <aside>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>;

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

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