Preventing Flex Item Overflowمنع فيضان النصوص داخل المرن
ابنِ واجهات متجاوبة بنظام Flexbox في CSS عبر تبديل الاتجاه من عمود الهاتف إلى صف الحاسوب، وتفعيل التفاف البطاقات التلقائي، وتصميم شريط علوي ثنائي اللغة، ومعالجة فيضان النصوص الطويلة بتصفير العرض الأدنى.
2 صفوف تعليمية
لغة CSS
4,285 مشاهدة
شرح صفوف ومحتوى الفقرة
الصف 1
شرح توضيحي
من أكثر المشكلات شيوعاً في تخطيطات Flexbox المتجاوبة امتناع بطاقة تحتوي رابطاً طويلاً متصلاً أو مسار ملف عن التقلص على الهاتف، فتدفع الصف بأكمله خارج حدود الشاشة. يرجع السبب الهندسي إلى أن المواصفة تمنح كل عنصر ابن داخل الحاوية المرنة القيمة الافتراضية min-width: auto التي تمنعه من الانكماش لأصغر من أطول كلمة متصلة بداخله.
يعالج إضافة التصريح min-width: 0; مع overflow: hidden; أو overflow-x: auto; مباشرة على صنف العنصر الابن هذه المشكلة فوراً، فيلتزم الصندوق بحدود شاشة الهاتف دون أي فيضان أفقي.
الصف 2
ملاحظة هامة
جميع فقرات هذا الدرس (تجاوب العناصر مع نظام Flexbox في لغة CSS)
