Responsive Flexbox Image Galleryبناء معرض صور مرن متجاوب
ابنِ واجهات متجاوبة بنظام Flexbox في CSS عبر تبديل الاتجاه من عمود الهاتف إلى صف الحاسوب، وتفعيل التفاف البطاقات التلقائي، وتصميم شريط علوي ثنائي اللغة، ومعالجة فيضان النصوص الطويلة بتصفير العرض الأدنى.
3 صفوف تعليمية
لغة CSS
4,285 مشاهدة
شرح صفوف ومحتوى الفقرة
الصف 1
شرح توضيحي
لبناء معرض صور مرن يتحكم بدقة في عدد الأعمدة لكل فئة شاشات، ادمج flex-wrap: wrap و gap: 14px مع تدرج قيمة الأساس المرن عبر نقاط التوقف؛ فيبدأ العنصر بالقيمة flex: 1 1 100% لعمود واحد على الهاتف، وينتقل إلى flex: 1 1 46% عند 600px لعمودين على الجهاز اللوحي، ثم flex: 1 1 22% عند 960px لأربعة أعمدة مكتبية متناسقة.
جرّب التبديل بين أنماط التجاوب الثلاثة للصندوق المرن داخل المختبر التفاعلي التالي:
الصف 2
معاينة حية
الصف 3
ملاحظة هامة
جميع فقرات هذا الدرس (تجاوب العناصر مع نظام Flexbox في لغة CSS)
