مراجعة 11:13، 11 يوليو 2018

الخاصية 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</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.

@@ سطر 1: / سطر 1: @@
 <noinclude>{{DISPLAYTITLE:الخاصية <code>order</code>}}</noinclude>
-الخاصية <code>order</code> في CSS تُحدِّد ترتيب عناصر flex في الحاوية، إذ ستُرتَّب العناصر ترتيبًا تصاعديًا اعتمادًا على قيمة الخاصية order المُسندَة إليها، والعناصر التي لها نفس القيمة ستُرتَّب وفق ورودها في الشيفرة المصدرية.<syntaxhighlight lang="css">
+الخاصية <code>order</code> في CSS تُحدِّد ترتيب عناصر flex في الحاوية، إذ ستُرتَّب العناصر ترتيبًا تصاعديًا اعتمادًا على قيمة الخاصية order المُسندَة إليها، والعناصر التي لها نفس القيمة ستُرتَّب وفق ورودها في الشيفرة المصدرية.
-/* القيم العددية، بما في ذلك الأعداد السالبة */
-order: 5;
-order: -5;
-/* القيم العامة */
+== بطاقة الخاصية ==
-order: inherit;
-order: initial;
-order: unset;
-</syntaxhighlight>ملاحظة: الغرض من الخاصية <code>order</code> هو التأثير على الترتيب المرئي للعناصر، وليس الترتيب المنطقي أو التنظيمي، ولا يجوز استخدام الخاصية <code>order</code> على البيانات غير المرئية، مثل النص المقروء صوتيًا.
 {| class="wikitable" style="width: 100%;"
 |-
@@ سطر 27: / سطر 20: @@
 |كما حُدِّدَت.
-|}
+|}<syntaxhighlight lang="css">
+/* القيم العددية، بما في ذلك الأعداد السالبة */
+order: 5;
+order: -5;
+/* القيم العامة */
+order: inherit;
+order: initial;
+order: unset;
+</syntaxhighlight>ملاحظة: الغرض من الخاصية <code>order</code> هو التأثير على الترتيب المرئي للعناصر، وليس الترتيب المنطقي أو التنظيمي، ولا يجوز استخدام الخاصية <code>order</code> على البيانات غير المرئية، مثل النص المقروء صوتيًا.
 == أمثلة ==
@@ سطر 65: / سطر 67: @@
 تقبل الخاصية <code>order</code> قيمةً واحدةً من الكلمات المحجوزة التالية.
-=== القيمة <code>[[CSS/integer|<integer>]]</code> ===
+=== <code>[[CSS/integer|<integer>]]</code> ===
 ستوضع عناصر flex في سطرٍ وحيد، مما قد يسبب في خروج المحتوى من حاويته إن لم تكن تتسع له.