خاصية Min-Width
آخر تحديث: 2026-09-13
min-width خاصية Min-Width
تضبط خاصية min-width الحد الأدنى لعرض العنصر، مانعةً إياه من الانضغاط بشكل صغير جدًا عندما يضيق الحاوية. قيمتها الافتراضية 0 تعني عدم وجود حد أدنى. تُستخدم غالبًا مع width و max-width وهي أداة مهمة لحماية قابلية القراءة في التخطيطات المتجاوبة.
| الفئة | |
|---|---|
| القيمة الأولية | 0 |
| موروث | لا |
| ينطبق على | non-replaced |
| نوع الحركة | length |
| إصدار CSS | CSS2 |
| الحالة | قياسي |
📝 التركيب
min-width: auto | <length> | <percentage> | min-content | max-content | fit-content;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
0 | كلمة مفتاحية | لا يوجد عرض أدنى. |
<length> | النوع | عرض أدنى ثابت. |
<percentage> | النوع | نسبة مئوية بالنسبة للكتلة الحاضنة. |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| min-width | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： لـ min-width أسبقية على width و max-width، مما يمنع العنصر من الانكماش دون هذا القيمة أبدًا.
❓ الأسئلة الشائعة
Qإذا تم تحديد min-width و width معًا، فأيهما يفوز؟
Aلـ min-width أولوية أعلى من width. عندما يكون width أصغر من min-width، يُعرض العنصر عند min-width؛ وعندما يكون أكبر، يُعرض عند width. يمكن لـ min-width حتى أن يلغي max-width. ترتيب قيود الحجم في CSS هو min-width أولًا، ثم max-width، ثم width، لذا فإن min-width هو الأقوى بين الثلاثة ويحمي المحتوى من السحق على الشاشات الضيقة. نفس الأسبقية تنطبق على الارتفاعات مع min-height.
Qلماذا يحتاج عناصر flex إلى min-width:0 لكي تتقلص؟
Aلأن قيمة min-width الافتراضية لعنصر flex هي auto، التي تتصرف مثل الحد الأدنى لعرض المحتوى، مثل أطول كلمة. عندما ينفد المساحة من الحاوية، يرفض العنصر الانكماش دون ذلك، مما يسبب تجاوزًا أو تخطيطًا معطوبًا. يسمح تعيين min-width:0 للعنصر بالانكماش بحرية، وهو أمر شائع لاقتطاع النص عبر text-overflow:ellipsis وللقوائم المقسمة بالتساوي داخل تخطيطات flex.
Qما الفرق بين min-width و max-width؟
Aيضبط min-width الحد الأدنى لعرض العنصر، مانعًا إياه من الانضغاط أضيق من القيمة المحددة؛ ويضبط max-width الحد الأعلى، مانعًا إياه من المد أوسع من القيمة المحددة. يمكن استخدامهما معًا، ويحل المتصفح العرض النهائي باستخدام الأسبقية min-width، ثم max-width، ثم width. معًا يحددان نطاق العرض في التخطيطات المتجاوبة.
Qإلى ماذا تُنسب النسبة المئوية لـ min-width؟
Aتُحسب النسبة المئوية بالنسبة لعرض الكتلة الحاضنة. على سبيل المثال، يعني min-width:50% أن العنصر لا يمكن أن يصبح أضيق من نصف عرض منطقة محتوى الأصل أبدًا. لاحظ أنه بالنسبة للعناصر ذات الموضع المطلق، فالمرجع هو padding box لأقرب سلف ذي موضع، لذا تحقق من أي كتلة حاضنة تنطبق قبل الاعتماد على النسبة المحسوبة. في التدفق العادي، تلك الكتلة الحاضنة هي دائمًا تقريبًا منطقة محتوى الأصل.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
