حد الكلمة الأدنى ورفض السالب | خاصية flex-shrink مع Flexbox في لغة CSS

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

حتى عند إسناد معامل تقلص كبير مثل flex-shrink: 5 لن ينكمش العنصر المرن إلى أقل من عرض أطول كلمة متصلة أو صورة ثابتة بداخله؛ ويعود الفضل في هذه الحماية التلقائية إلى القيمة الافتراضية min-width: auto في الصفوف أو min-height: auto في الأعمدة، والتي تمنع تداخل السطور النصية وتشابكها.

يمكنك رفع هذه الأرضية عمداً بتحديد min-width: 140px، أو خفضها عبر min-width: 0 عند قص النصوص الطويلة مع overflow: hidden. وكما هو الحال في التمدد، تُعد الأرقام السالبة مثل flex-shrink: -1 غير صالحة ويتجاهلها المتصفح تماماً.

الصف 2 كود برمجي

CSS

.floor-card {
  flex-basis: 260px;
  flex-shrink: 2;
  min-width: 150px;
}

جرّب بنفسك

الصف 3 ملاحظة هامة

الصف 4 ملاحظة هامة

Flex Shrink Minimum Content Floor حد الكلمة الأدنى ورفض السالب

شرح صفوف ومحتوى الفقرة

جميع فقرات هذا الدرس (خاصية flex-shrink مع Flexbox في لغة CSS)