انتقل إلى محتوى الدرس

Flex Order Visual Concept مفهوم ترتيب العناصر بخاصية order

تعرّف على خاصية order في التخطيط المرن Flexbox لإعادة ترتيب ظهور العناصر بصرياً بالأعداد السالبة والصفرية والموجبة مع مراعاة سلامة تنقل مفتاح Tab وقارئات الشاشة وفق شجرة HTML.
2 صفوف تعليمية
لغة CSS
4,428 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

جميع خصائص التخطيط المرن التي درسناها سابقاً كانت تُكتب على الحاوية الأب، أما خاصية order فهي أول خاصية نطبقها مباشرةً على العنصر المرن الابن نفسه. افتراضياً تظهر العناصر على المحور الرئيسي بنفس تسلسل كتابتها في مستند HTML لأن القيمة الابتدائية لكل عنصر هي order: 0.

عند إسناد أرقام صحيحة مخصصة لخاصية order، يرتب المتصفح العناصر تصاعدياً من الرقم الأصغر إلى الأكبر بدءاً من القيم السالبة، مروراً بالصفر، وصولاً إلى القيم الموجبة. وإذا اشترك عنصران في نفس الرقم فيُحسم التعادل بينهما وفق ترتيبهما الأصلي في الكود المصدري.

الصف 2 ملاحظة هامة