شرح صفوف ومحتوى الفقرة
داخل أدوات المطور DevTools افتح تبويب Layout وفعّل خيار إظهار أرقام الترتيب مع شارة flex ليرسم المتصفح أرقاماً إرشادية مباشرة فوق كل عنصر مرن تسهّل عليك مراجعة الترتيب. لخّص القواعد الأساسية من الجدول التالي:
القيمة المسندة في order | الموضع البصري على المحور | قاعدة كسر التعادل | تأثيرها على مفتاح Tab |
|---|---|---|---|
سالبة مثل -2 و -1 | تتقدم قبل جميع العناصر الافتراضية | تتبع تسلسل HTML الأصلي | لا يتغير بل يتبع شجرة DOM |
افتراضية 0 | الموضع الابتدائي لكل عنصر غير معدّل | تتبع تسلسل HTML الأصلي | يطابق الترتيب البصري بانسجام تام |
موجبة مثل 1 و 2 | تتأخر بعد جميع العناصر الصفرية | تتبع تسلسل HTML الأصلي | لا يتغير بل يتبع شجرة DOM |
عشرية مثل 1.5 | قيمة خاطئة نحوياً يتجاهلها المتصفح | يبقى العنصر على قيمته الصحيحة السابقة | لا يتغير |
خلاصة المعرفة ومحطة الانتقال
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنت في هذا الدرس كيفية فرز الأبناء بصرياً عبر خاصية order من الأعداد السالبة مروراً بالقيمة الابتدائية 0 وحتى الأعداد الموجبة، مع الحفاظ على سلامة وصول لوحة المفاتيح Tab وقارئات الشاشة. في الخطوة التالية ننتقل إلى درس خاصية flex-basis مع Flexbox في لغة CSS لتحديد الحجم الابتدائي المثالي للعنصر المرن قبل التمدد أو الانكماش.