شرح صفوف ومحتوى الفقرة
تمنحك الطريقتان الكلاسيكيتان في هذا الدرس فهماً متيناً لآليات التدفق الأفقي وصيانة المشاريع القائمة بكفاءة. قارن بينهما في الجدول الملخص التالي تمهيداً للفصل القادم الذي يقدم نظام الصناديق المرنة أحادي البعد لتوزيع العناصر ومحاذاتها بمرونة أعلى:
| وجه المقارنة | طريقة display: inline-block | طريقة float مع display: flow-root |
|---|---|---|
| المسافة بين الخانات | تترك فراغاً صغيراً يقارب 4px بسبب مسافات الكود | ترص التبويبات بتلاصق تام بصفر فراغات بينية |
| توسيط الروابط أفقياً | سهلة جداً عبر text-align: center على القائمة الأب | تحاذي نحو البداية أو النهاية ولا تدعم التوسيط المباشر |
| توزيع طرفي الشريط | لا تدفع عنصراً منفرداً لأقصى الطرف المقابل | تدعم فصل زر الدخول في الطرف المقابل بتعويم معاكس |
| ارتفاع القائمة الأب | تحافظ .nav-list على ارتفاعها تلقائياً | تتطلب display: flow-root لمنع انهيار الارتفاع |
خلاصة المعرفة ومحطة الانتقال
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنت في ملخص الدرس بناء أشرطة التنقل الأفقية بطريقتي display: inline-block والتعويم المحتوى بـ display: flow-root، ورسم الفواصل العمودية، وتوزيع الروابط على طرفي الشريط، وتثبيته أعلى الشاشة أثناء التمرير عبر position: sticky. وفي الخطوة التالية ننتقل إلى فصل جديد يبدأ بدرس الصناديق المرنة - فليكس بوكس في لغة CSS لتعلم أقوى أنظمة التخطيط المرنة الحديثة.