60. خاصية عنصر Flex: flex-shrink

تحدد flex-shrink قدرة عنصر flex على الانكماش إذا لزم الأمر، عادةً عندما يتجاوز الحجم الإجمالي للعناصر حجم الحاوية.

كيف يعمل Flex Shrink

• تأخذ flex-shrink رقماً بدون وحدة (نسبة). الافتراضي هو 1 (جميع العناصر تنكمش بالتساوي).
• إذا تم ضبط flex-shrink على 0 ، فلن ينكمش العنصر تحت عرضه المحدد (أو حجم محتواه).

مثال: منع الانكماش

في شريط التنقل، قد ترغب في أن يحافظ شعار علامتك التجارية على عرضه الكامل، حتى لو اضطرت الروابط إلى الانكماش.

css .nav-logo { /* يمنع الشعار من الانكماش أبداً عن حجمه الأصلي */ flex-shrink: 0; width: 150px; }

.nav-links { flex-shrink: 1; /* يسمح للروابط بالانكماش إذا كانت الحاوية صغيرة جداً */ }

العلاقة مع min-width: إذا تم ضبط عنصر على flex-shrink: 0 ، فقد ترغب أيضاً في ضبط min-width لضمان عدم تكسر المحتوى إذا كانت الشاشة صغيرة جداً.