خاصية Order
آخر تحديث: 2026-09-13
order خاصية Order
تضبط خاصية order ترتيب عرض عناصر flex داخل حاوية. قيمتها الافتراضية هي 0. تظهر العناصر ذات القيم الأصغر أولًا؛ وتُرتَّب العناصر ذات القيم المتساوية حسب موضعها في DOM. ولا تغير الخاصية سوى الترتيب المرئي، وليس بنية DOM، لذا فهي تؤثر أيضًا على ترتيب القراءة لقارئات الشاشة وترتيب تركيز مفتاح Tab. استخدمها بحذر.
| الفئة | |
|---|---|
| القيمة الأولية | 0 |
| موروث | لا |
| ينطبق على | |
| نوع الحركة | |
| إصدار CSS | CSS3 |
| الحالة | قياسي |
📝 التركيب
order: <integer>;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
<integer> | النوع | ترتيب عرض عناصر flex |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| order | ✓ v29 | ✓ v12 | ✓ v28 | ✓ v9 | ✓ v17 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： يقبل order قيمًا صحيحة، بما فيها الأرقام السالبة. كل العناصر افتراضيها 0؛ فقيمة سالبة تدفع عنصرًا إلى المقدمة وقيمة موجبة تنقله إلى الخلف.
تحذير： يغير order ترتيب قارئ الشاشة وتركيز لوحة المفاتيح، الذي قد لا يطابق بعد الآن ترتيب DOM ويؤثر على إمكانية الوصول. استخدمه فقط للتعديلات المرئية البحتة وتجنب إعادة ترتيب محتوى له معنى منطقي.
❓ الأسئلة الشائعة
Qهل يغير order ترتيب DOM؟
Aلا. يغير order العرض المرئي فقط؛ وتبقى بنية DOM دون تغيير، لذا يظل تكرار عقد JavaScript وترتيب قراءة قارئ الشاشة وترتيب تركيز مفتاح Tab يتبعان الترتيب الأصلي لـ DOM. والتأثير مرئي بحت ولا يغير كيفية تسلسل الصفحة، فمحركات البحث والتقنيات المساعدة ترى تسلسل DOM كما هو. وإذا كانت العناصر روابط أو عناصر تحكم في النموذج، فقد يؤدي ترتيب مرئي يختلف عن ترتيب التركيز إلى إرباك المستخدمين، لذا قيّم تأثير إمكانية الوصول قبل استخدامه.
Qكيف يفيد order في التخطيطات المتجاوبة؟
Aبالاقتران مع media queries، يتيح order تغيير ترتيب العرض دون لمس HTML: فمثلًا على الجوال ينتقل المحتوى الرئيسي أولًا وتنتقل الشريط الجانبي لاحقًا، بينما على سطح المكتب تُستعاد الترتيب الأصلي. وتبدو قاعدة نموذجية مثل @media (max-width: 768px) { .sidebar { order: 1 } }. وهو يناسب التخطيطات التي يتغير ترتيب محتواها حسب الجهاز، لكن تجنب الإفراط في استخدامه — فإعادة الترتيب الكثيفة تضر بسهولة قراءة الكود.
Qبأي ترتيب تُرتَّب العناصر ذات قيمة order نفسها؟
Aتُرتَّب العناصر أولًا حسب قيمة order من الأصغر إلى الأكبر؛ وعند تساوي القيم تُرتَّب حسب ترتيب الكتابة في DOM. والترتيب الافتراضي هو 0، وتأتي القيم السالبة قبل العناصر العادية، فـ order: -1 ينقل عنصرًا إلى المقدمة تمامًا بينما order: 1 ينقله إلى الخلف. وعمليًا، استخدم order باعتدال على عناصر فردية وتجنب بناء مخطط ترتيب عبر عناصر كثيرة، إذ يصبح صعب الفهم.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
خاصية تخطيط Flex
تعلّم الاختصار الأساسي لتخطيط flex
اتجاه المحور الرئيسي
يعكس ترتيب العناصر باستخدام row-reverse أو column-reverse
