خصائص الحد الأدنى للحجم العرضي لـ CSS

التعريف والاستخدام

min-inline-size يحدد الخاصية الحجم الأدنى للعنصر في الاتجاه الخطي.

إذا كان حجم المحتوى أصغر من الحجم الأدنى في الاتجاه الداخلي، يتم تطبيق min-inline-size قيمة الخاصية.

إذا كان حجم المحتوى أكبر من الحجم الأدنى في الاتجاه الداخلي، min-inline-size قيمة الخاصية لا تنجح.

ملاحظة:خصائص CSS ذات الصلة writing-mode يحدد الاتجاه الداخلي، مما يؤثر على min-inline-size نتائج الخاصية. للصفحات باللغة الإنجليزية، الاتجاه هو السفلي، والاتجاه الداخلي من اليسار إلى اليمين.

CSS min-inline-size خصائص مع خاصية CSS min-height و min-width مماثلة جدًا، لكن min-inline-size الخصائص تعتمد على الاتجاه الداخلي.

مثال

مثال 1

ضع الحجم الأدنى للعنصر <div> في الاتجاه الداخلي على 200 بكسل:

div {
  min-inline-size: 200px;
}

جرب بنفسك

مثال 2: نمط الكتابة

ضع <div> الخاصية writing-mode عندما يتم تعيين قيمة الخاصية writing-mode إلى vertical-rl، يتغير اتجاه السطر من الجانبي إلى السفلي، مما يؤثر على كيفية عمل خاصية min-inline-size:

div {
  min-inline-size: 260px;
  writing-mode: vertical-rl;
}

جرب بنفسك

مثال 3: min-inline-size و inline-size

مراقبة مثال inline-size للعنصر <div> ذو حجم 200px وآخر min-inline-size أداء مختلف للعنصر <div> ذو حجم 200px عند تغيير حجم المحتوى:

#div1 {
  min-inline-size: 200px;
}
#div2 {
  inline-size: 200px;
}

جرب بنفسك

جملة CSS

min-inline-size: auto|length|initial|inherit;

قيمة الخاصية

تفاصيل التقنية

دعم المتصفح

الرقم في الجدول يمثل إصدار المتصفح الذي يدعم الخاصية بشكل كامل لأول مرة.

الصفحات ذات الصلة

المرجع:خصائص inline-size CSS

المرجع:خصائص الحد الأقصى للحجم العرضي لـ CSS

المرجع:خصائص الحد الأدنى لارتفاع العنصر لـ CSS

المرجع:خصائص الحد الأدنى للحجم العرضي لـ CSS

المرجع:خصائص writing-mode CSS