خصائص الحد الأقصى للحجم الداخلي لـ CSS

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

max-inline-size الخصائص تحدد الحجم الأقصى للعنصر في الاتجاه الداخلي.

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

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

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

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

مثال

مثال 1

ضع أقصى حجم العنصر في الاتجاه الداخلي على 60 بكسل:

div {
  max-inline-size: 60px;
}

جرب بنفسك

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

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

div {
  max-inline-size: 60px;
  writing-mode: vertical-rl;
}

جرب بنفسك

مثال 3: Max-inline-size vs Inline-size

مراقبة عنصر <div> (inline-size 100px) و عنصر <div> آخر (max-inline-size ملاحظة الرد الفرقية عند تغيير حجم المحتوى (100px):

#div1 {
  max-inline-size: 100px;
}
#div2 {
  inline-size: 100px;
}

جرب بنفسك

جملة CSS

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

قيمة الخاصية

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

دعم المتصفح

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

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

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

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

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

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

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