العودة إلى الدورة

الدرس 58: خاصية عنصر Flex: order

إتقان CSS: من الصفر إلى الاحتراف في 100 درس

58. خاصية عنصر Flex: order

تسمح لك خاصية order بتغيير التسلسل المرئي لعناصر flex، بغض النظر عن ترتيبها الأصلي في هيكل HTML. هذا مفيد بشكل خاص للتصميم المتجاوب حيث قد ترغب في انتقال شريط جانبي إلى أسفل المحتوى الرئيسي على الهاتف المحمول، مع الحفاظ على تسلسل HTML من أجل إمكانية الوصول.

كيف يعمل الـ Order

  • تأخذ order قيمة عدد صحيح (موجب أو سالب أو صفر).
  • الترتيب الافتراضي لجميع عناصر flex هو 0.
  • يتم ترتيب العناصر من أقل قيمة ترتيب إلى أعلاها.
  • إذا كان لعنصرين نفس قيمة الترتيب، فإنهما يحافظان على ترتيبهما الأصلي في كود المصدر.

مثال

html

A
B

css .container { display: flex; }

.item-a { order: 2; }

.item-b { order: -1; /* أقل قيمة، لذا ينتقل إلى البداية تماماً */ }

.item-c { order: 1; } /* النتيجة المرئية: B, C, A */

أفضل ممارسة: استخدم أرقاماً بسيطة ومتسلسلة (-1, 0, 1, 2) بدلاً من فجوات كبيرة، لأن ذلك يجعل إعادة الترتيب أسهل لاحقاً.