خاصية Flex Shrink
آخر تحديث: 2026-09-13
flex-shrink خاصية Flex Shrink
تضبط خاصية flex-shrink معامل الانكماش لعنصر flex، وتقرر مقدار انكماش العنصر عندما لا يكون لدى الحاوية مساحة كافية. قيمتها الافتراضية هي 1، أي أن العناصر تنكمش حسب الحاجة. أما القيمة 0 فتبقي العنصر بحجمه الأصلي حتى عندما ينفد الفضاء. والقيم الأكبر تجعل العنصر ينكمش أكثر عند ضيق المساحة.
| الفئة | |
|---|---|
| القيمة الأولية | 1 |
| موروث | لا |
| ينطبق على | |
| نوع الحركة | |
| إصدار CSS | CSS3 |
| الحالة | قياسي |
📝 التركيب
flex-shrink: <number>;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
<number> | النوع | معامل الانكماش؛ 0 يعني أن العنصر لا ينكمش |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| flex-shrink | ✓ v29 | ✓ v12 | ✓ v28 | ✓ v9 | ✓ v17 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： flex-shrink نسبة بلا وحدة ولا يقبل القيم السالبة. وتُوزَّع كمية الانكماش بين العناصر بنسبة قيم flex-shrink الخاصة بها: إذا كان عنصر يساوي 2 وآخر يساوي 1، فالأول ينكمش ضعف الآخر.
تحذير： لا يؤثر flex-shrink إلا عندما ينفد فضاء الحاوية. فإذا لم تتجاوز العرض الإجمالي للعناصر الحاوية، فلا يكون لـ flex-shrink أي تأثير وتبقى العناصر بحجمها الأصلي.
❓ الأسئلة الشائعة
Qما هي الاستخدامات العملية لـ flex-shrink: 0؟
Aيُستخدم عادةً للعناصر التي يجب أن تحافظ على حجم ثابت، مثل الأشرطة الجانبية والشعارات وأزرار الأيقونات والترقيم. هذه العناصر لا تُضغط عندما ينفد فضاء الحاوية، مما يحفظ قابلية القراءة ومنطقة النقر. مثال نموذجي: تستخدم منطقة المحتوى flex-shrink: 1 لتنكمش بسلاسة، بينما تستخدم الشريط الجانبي flex-shrink: 0 لتبقى ثابتة. لاحظ أن flex-shrink لا يبدأ إلا بعد حساب flex-basis وأحجام المحتوى، لذا يجب أن يكون العنصر الثابت أعرض فعليًا من الحاوية لكي يظهر التأثير.
Qلماذا لا يزال عنصري مضغوطًا حتى مع flex-shrink: 0؟
Aالأسباب المحتملة: وجود max-width أو min-width على العنصر يتعارض مع إعداد الانكماش؛ أو أن الحاوية الأصلية تقص المحتوى بـ overflow: hidden بدلًا من الانكماش؛ أو أن flex-basis قيمته auto والعنصر يحتوي نصًا طويلًا قابلًا للالتفاف. ومن الأخطاء الشائعة أن اختصار flex لاحقًا مثل flex: 1 يعيد ضبط flex-shrink إلى 1، لذا تحقق من ترتيب التتالي إذا بدا أن الخاصية متجاهلة. وتحقق من تصريحات الحجم الكاملة للعنصر وإعدادات overflow للأصل، وتأكد من كتابة flex-shrink: 0 على العنصر نفسه.
Qماذا يحدث عند مزج flex-shrink: 1 و flex-shrink: 0؟
Aعند ضيق المساحة، تنكمش العناصر ذات قيمة flex-shrink الأكبر أكثر. وعند مزجها، تنكمش العناصر ذات flex-shrink: 1 بشكل متناسب بينما تحافظ العناصر ذات flex-shrink: 0 على حجمها، فتصبح العناصر القابلة للانكماش أضيق وقد يحدث محتواها أو يلتف. وهذه بالضبط حيلة التخطيط الشائعة: تبقى الشريط الجانبي ثابتًا بـ flex-shrink: 0 بينما تمتص منطقة المحتوى الانكماش بـ flex-shrink: 1.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
