تنسيق الواجهة بنظام حديث: CSS Flexbox والتجاوب مع شاشات الموبايل
بتطلع من هالدرس وأنت قادر على: تنسيق الصفحة بألوان وخطوط عربية متناسقة، وتوزيع العناصر بمرونة تامة باستخدام CSS Flexbox على مختلف الشاشات.
المدة التقديرية: فيديو 15:45 + تطبيق وتمرين 55 دقيقة · ضمن منهج البرمجة وتطوير الويب
لأن 80% من زوار المواقع في المنطقة العربية يتصفحون عبر شاشات الهواتف
في الماضي كان تصميم المواقع يعتمد على الجداول والـ float، وكانت النتيجة صفحات تتشوه وتتداخل عناصرها بمجرد فتحها من شاشة جوال صغيرة. اليوم أصبح CSS Flexbox هو المعيار العالمي لتوزيع وترتيب العناصر.
فهمك لمنطق الصناديق (Box Model) والشبكات المرنة (Flexbox) يمكنك من ضبط المسافات، توسيط النصوص، وتوزيع البطاقات جنباً إلى جنب على الشاشات الكبيرة وتحويلها لعمود واحد على الموبايل بسطر كود واحد.
في هذا الدرس سنربط ملف CSS خارجي، نحدد نظام الألوان والخطوط، ونبني تخطيطاً احترافياً لبطاقات الخدمات بمرونة تامة.
شاهد الشرح المباشر ثم نفّذ خطوة بخطوة
الفيديو تعليمي عربي موثّق ومتاح للمشاهدة المباشرة. الشرح المكتوب أدناه تفصيلي ومستقل، ويغطي كل تفاصيل التطبيق حتى إن تعذر تشغيل الفيديو بسبب ضعف الاتصال.
خطوات التطبيق العملي على حاسوبك
- أنشئ ملفاً جديداً باسم 'style.css' داخل مجلد 'assets/css' واربطه بصفحة HTML عبر وسم داخل . شو رح تشوف على الشاشة: سطر ربط قياسي داخل وسم head يتأكد من تحميل ملف التنسيق مع الصفحة. إذا ما ظهرلك: إذا لم تظهر التغييرات، اضغط Ctrl + F5 بالمتصفح لإفراغ الكاش وإعادة تحميل التنسيق.
- اكتب قاعدة التصفير الأساسية (CSS Reset) في أول سطرين: * { margin: 0; padding: 0; box-sizing: border-box; }. شو رح تشوف على الشاشة: إلغاء كل الهوامش الافتراضية المزعجة التي يضعها المتصفح تلقائياً وضبط حساب القياسات بدقة. إذا ما ظهرلك: قاعدة border-box تضمن أن إضافة padding والحدود لا تزيد من الحجم الإجمالي للعنصر.
- اضبط خط الصفحة والاتجاه في وسم body: body { direction: rtl; font-family: system-ui, sans-serif; line-height: 1.6; }. شو رح تشوف على الشاشة: النصوص العربية تتحول للاتجاه الصحيح بخط مقروء ومسافات أسطر مريحة للعين. إذا ما ظهرلك: استخدام system-ui يضمن ظهور الخط النظامي السريع بالجهاز دون انتظار تحميل خطوط ثقيلة أوفلاين.
- نسّق شريط التنقل في الترويسة باستخدام Flexbox: .nav-container { display: flex; justify-content: space-between; align-items: center; }. شو رح تشوف على الشاشة: الشعار يستقر في اليمين وقائمة الروابط تستقر في اليسار بمسافة متناسقة ومحاذاة رأسية دقيقة. إذا ما ظهرلك: justify-content يتحكم في المحور الأفقي، وalign-items يتحكم في المحور الرأسي.
- حوّل قسم الخدمات إلى شبكة بطاقات مرنة: .services-grid { display: flex; flex-wrap: wrap; gap: 20px; }. شو رح تشوف على الشاشة: بطاقات الخدمات تصطف بجانب بعضها مع فواصل منتظمة (gap)، وتنزل للسطر التالي إذا ضاقت المساحة. إذا ما ظهرلك: flex-wrap: wrap تمنع انضغاط البطاقات خارج الشاشة وتجعلها تتدفق بسلاسة.
- نسّق بطاقة الخدمة الواحدة: .service-card { flex: 1 1 280px; padding: 20px; background: #fff; border-radius: 8px; border: 1px solid #ddd; }. شو رح تشوف على الشاشة: بطاقات بيضاء أنيقة بظلال خفيفة وزوايا مستديرة تشبه بطاقات التطبيقات الحديثة. إذا ما ظهرلك: خاصية flex: 1 1 280px تجعل البطاقة تتمدد وتتقلص بحد أدنى مناسب للشاشات الصغيرة.
- نسّق الأزرار بلون واضح وجذاب ومؤثر عند مرور الفأرة: .btn:hover { opacity: 0.9; transform: translateY(-2px); }. شو رح تشوف على الشاشة: الزر يعطي استجابة بصرية ناعمة عند تحريك المؤشر فوقه تؤكد قابلية النقر. إذا ما ظهرلك: أضف transition: all 0.2s ease لجعل الحركة سلسة وطبيعية.
- غيّر حجم نافذة المتصفح يدوياً يمنة ويسرة أو اضغط Ctrl + Shift + M لتفعيل وضع الموبايل في أدوات المطور. شو رح تشوف على الشاشة: البطاقات والترويسة تتكيف وتتغير تلقائياً مع تغير العرض دون ظهور شريط تمرير أفقي سفلي. إذا ما ظهرلك: ظهور شريط تمرير أفقي يعني وجود عنصر أعرض من الشاشة ويحتاج ضبط max-width: 100%.
التمرين العملي للدرس 3
اربط ملف CSS، وطبّق قاعدة التصفير والاتجاه RTL، ونسّق شبكة بطاقات من 3 خدمات باستخدام display: flex وgap وflex-wrap، وتأكد من تجاوبها عند تصغير شاشة المتصفح دون شريط تمرير أفقي.
معيار النجاح والتسليم
- ملف style.css مربوط بنجاح وبقاعدة التصفير border-box مطبقة.
- استخدام Flexbox في الترويسة وشبكة البطاقات مع توزيع متوازن.
- التصميم يتجاوب تلقائياً مع الشاشات الضيقة دون كسر الهيكل.
ثلاثة أسئلة للتأكد من استيعاب المفاهيم
ما وظيفة خاصية box-sizing: border-box؟
تجعل حساب عرض العنصر وارتفاعه يشمل الحشوات الداخلية (padding) والحدود (border)، مما يمنع تضخم العناصر وكسر التصميم.
ما الفرق بين justify-content و align-items في Flexbox؟
خاصية justify-content تضبط محاذاة العناصر على المحور الرئيسي (Main Axis - أفقياً عادة)، بينما align-items تضبط المحاذاة على المحور المعاكس (Cross Axis - رأسياً).
كيف نتجنب خروج العناصر خارج الشاشة على الهواتف؟
باستخدام flex-wrap: wrap وضبط max-width: 100% للصور والحاويات وتجنب إعطاء عروض ثابتة بالبكسل الصريح مثل width: 800px.
انسخه لملاحظاتك
قناة وتطبيقات مهارات سوريا
شارك إنجازك في مجموعتنا التفاعلية وتابع فرص العمل الحر البرمجية عبر تيليغرام.