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

الدرس 64: تطبيق Flexbox العملي: إنشاء تذييل لاصق وشريط تنقل

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

64. تطبيق Flexbox العملي: إنشاء تذييل لاصق وشريط تنقل

Flexbox ممتاز لهيكلة أجزاء كبيرة من الصفحة. هنا نحل مشكلتين كلاسيكيتين في التخطيط: التذييل اللاصق (sticky footer) والتنقل بكامل الارتفاع.

1. مشكلة التذييل اللاصق (Sticky Footer)

الهدف هو جعل التذييل يلتصق بأسفل منفذ العرض، حتى لو كان المحتوى قصيراً جداً بحيث لا يملأ الشاشة.

الحل: حول <body> إلى حاوية flex تعتمد على الأعمدة.

css html, body { height: 100%; margin: 0; }

body { display: flex; flex-direction: column; /* المحور الرئيسي رأسي */ }

.main-content { /* هذا هو السحر: ينمو ليأخذ كل المساحة الرأسية المتبقية */ flex-grow: 1; }

footer { flex-shrink: 0; /* يضمن عدم انكماش التذييل */ padding: 20px; background: #333; color: white; }

2. محاذاة شريط التنقل الأفقي

توسيط العناصر، دفع الشعار إلى جانب واحد، وتوزيع الروابط هو أمر بسيط مع Flexbox.

css .navbar { display: flex; justify-content: space-between; /* يدفع الشعار لليسار والروابط لليمين / align-items: center; / يوسط العناصر رأسياً */ padding: 10px; }

.logo { /* منع التلاعب بالشعار */ flex-shrink: 0; }

.nav-links { display: flex; /* الروابط داخل حاوية nav-links ستتدفق أفقياً / gap: 15px; / تباعد بين الروابط (الدرس 65) */ }