Flex Shrink Contraction Conceptانكماش العناصر بخاصية flex-shrink
تعلّم كيف تمنع خاصية flex-shrink فيضان الحاوية عبر تقليص العناصر تلقائياً عند ضيق المساحة وكيف تحمي القيمة صفر الأيقونات والأزرار من الانضغاط مع فهم معاملات التقلص النسبية وحد الكلمة الأدنى.
3 صفوف تعليمية
لغة CSS
3,272 مشاهدة
شرح صفوف ومحتوى الفقرة
الصف 1
شرح توضيحي
عندما تكون الحاوية المرنة ذات السطر الواحد flex-wrap: nowrap أضيق من مجموع الأحجام الأساسية flex-basis لأبنائها، ينشأ عجز في المساحة على المحور الرئيسي. وبدلاً من السماح للعناصر بالفيضان خارج إطار الحاوية فوراً، يمنح نظام Flexbox كل عنصر قيمة افتراضية هي flex-shrink: 1.
بفضل القيمة الافتراضية flex-shrink: 1 تتعاون العناصر وتنكمش تلقائياً إلى أقل من حجمها الأساسي لتبقى مصفوفة داخل حدود الحاوية طالما يسمح محتواها النصي بذلك.
الصف 2
صورة توضيحية
الصف 3
ملاحظة هامة
جميع فقرات هذا الدرس (خاصية flex-shrink مع Flexbox في لغة CSS)
