الفرق بين المراجعتين لصفحة: «CSS/order»
< CSS
لا ملخص تعديل |
لا ملخص تعديل |
||
| (6 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة) | |||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:الخاصية <code>order</code>}}</noinclude> | <noinclude>{{DISPLAYTITLE:الخاصية <code>order</code>}}</noinclude> | ||
الخاصية <code>order</code> في CSS تُحدِّد ترتيب عناصر flex في الحاوية، إذ ستُرتَّب العناصر ترتيبًا تصاعديًا اعتمادًا على قيمة الخاصية order المُسندَة إليها، والعناصر التي لها نفس القيمة ستُرتَّب وفق ورودها في الشيفرة المصدرية. | الخاصية <code>order</code> في CSS تُحدِّد ترتيب عناصر flex في الحاوية، إذ ستُرتَّب العناصر ترتيبًا تصاعديًا اعتمادًا على قيمة الخاصية order المُسندَة إليها، والعناصر التي لها نفس القيمة ستُرتَّب وفق ورودها في الشيفرة المصدرية. | ||
== بطاقة الخاصية == | |||
{| class="wikitable" style="width: 100%;" | {| 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> على البيانات غير المرئية، مثل النص المقروء صوتيًا. | |||
== أمثلة == | == أمثلة == | ||
| سطر 33: | سطر 35: | ||
<header>...</header> | <header>...</header> | ||
<div id='main'> | <div id='main'> | ||
<article> | <article>مقالة</article> | ||
<nav> | <nav>التنقل</nav> | ||
<aside> | <aside>في الجانب</aside> | ||
</div> | </div> | ||
<footer>...</footer> | <footer>...</footer> | ||
| سطر 65: | سطر 67: | ||
تقبل الخاصية <code>order</code> قيمةً واحدةً من الكلمات المحجوزة التالية. | تقبل الخاصية <code>order</code> قيمةً واحدةً من الكلمات المحجوزة التالية. | ||
=== | === <code>[[CSS/integer|<integer>]]</code> === | ||
ستوضع عناصر flex في سطرٍ وحيد، مما قد يسبب في خروج المحتوى من حاويته إن لم تكن تتسع له. | ستوضع عناصر flex في سطرٍ وحيد، مما قد يسبب في خروج المحتوى من حاويته إن لم تكن تتسع له. | ||
| سطر 73: | سطر 75: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== انظر أيضًا == | |||
* صفحة الخاصية <code>[[CSS/flex|flex]]</code> صفحة الخاصيات الفرعية التي تضبطها هذه الخاصية وهي: <code>[[CSS/flex-basis|flex-basis]]</code>، و <code>[[CSS/flex-direction|flex-direction]]</code>، و <code>[[CSS/flex-flow|flex-flow]]</code>، و <code>[[CSS/flex-grow|flex-grow]]</code>، و <code>[[CSS/flex-shrink|flex-shrink]]</code>، و <code>[[CSS/flex-wrap|flex-wrap]]</code> | |||
* صفحة الخاصية <code>[[CSS/grid|grid]]</code> التي تضبط جميع الخاصيات التي تُحدَّد خصائص الشبكة بوضوح. | |||
* صفحة الخاصية <code>[[CSS/justify-content|justify-content]]</code> التي تعرِّف طريقة توزيع المتصفح للمسافة بين العناصر وحولها على امتداد المحور الرئيسي من حاوية flex. | |||
== مصادر ومواصفات == | == مصادر ومواصفات == | ||
* مواصفة [https://drafts.csswg.org/css-flexbox-1/#order-property CSS Flexible Box Layout Module]. | * مواصفة [https://drafts.csswg.org/css-flexbox-1/#order-property CSS Flexible Box Layout Module]. | ||
[[تصنيف:CSS]] | [[تصنيف:CSS|{{SUBPAGENAME}}]] | ||
[[تصنيف:CSS Property]] | [[تصنيف:CSS Property|{{SUBPAGENAME}}]] | ||
[[تصنيف:CSS Flexbox]] | [[تصنيف:CSS Flexbox|{{SUBPAGENAME}}]] | ||
المراجعة الحالية بتاريخ 08:44، 25 يوليو 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>
<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.