شرح صفوف ومحتوى الفقرة
لتشخيص سبب انضغاط أيقونة أو فيضان سطر مرن، افحص العنصر في أدوات المطور DevTools عبر لوحتي Layout وComputed لمراجعة قيم flex-shrink وflex-basis وmin-width الفعلية. يلخص الجدول الآتي حالات استخدام flex-shrink ومقارنتها.
| التصريح | سلوك التقلص عند ضيق الحاوية | الاستخدام العملي الشائع |
|---|---|---|
flex-shrink: 1 | انكماش نسبي تلقائي افتراضي | الفقرات النصية والبطاقات المرنة المعتادة |
flex-shrink: 0 | منع الانكماش تحت الحجم الأساسي نهائياً | الأيقونات والصور الرمزية والأزرار الثابتة |
flex-shrink: 2 فأكثر | التنازل عن حصة أكبر من عجز المساحة | الألواح الثانوية التي تفسح المجال أولاً |
min-width: auto | إيقاف الانكماش عند عرض أطول كلمة | حماية تلقائية للنصوص من التداخل |
flex-shrink: -1 | صيغة غير صالحة يتجاهلها المتصفح | مرفوضة دائماً لأن المعاملات غير سالبة فقط |
خلاصة المعرفة ومحطة الانتقال
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
في ملخص الدرس تعرّفت على دور القيمة الافتراضية flex-shrink: 1 في منع الفيضان، وكيفية حماية الأيقونات والأزرار من التشوه عبر flex-shrink: 0، وتفاعل معاملات التقلص المرجحة مع أرضية المحتوى min-width: auto. وفي الخطوة التالية ننتقل إلى درس خاصية align-self مع Flexbox في لغة CSS لتخصيص محاذاة عنصر مرن منفرد على المحور المتعامد.