ویژگی max-inline-size 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

اندازه بزرگترین سایز درون‌خط عنصر <div> را به 60 پیکسل تنظیم کنید:

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

آزمایش کنید

مثال 2: حالت نوشتاری

عنصر <div> را تنظیم کنید: 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|مقدار اولیه|وراثت;

مقدار ویژگی

مقدار توضیح
자동 پیش‌فرض. مقدار پیش‌فرض max-inline-size برای عنصر.
length از واحد‌های px، pt، cm و غیره استفاده کنید. لطفاً به:واحدهای CSS.
% درصدی از اندازه مربوط به محور پدر در محور مورد نظر.
مقدار اولیه این ویژگی را به مقدار پیش‌فرض خود تنظیم کنید. ببینید: مقدار اولیه.
وراثت این ویژگی را از عنصر والد خود ارث می‌برد. ببینید: وراثت.

جزئیات فنی

مقدار پیش‌فرض: 자동
وراثت: خیر
انیمیشن‌سازی: پشتیبانی. لطفاً به:ویژگی‌های مرتبط با انیمیشن.
نسخه: CSS3
نوع‌نویسی جاوااسکریپت: object.style.maxInlineSize="60px"

پشتیبانی مرورگر

اعداد در جدول نشان‌دهنده نسخه مرورگر اولیه‌ای است که این ویژگی را کامل پشتیبانی می‌کند.

کروم ایج فایرفاکس سفاری опера
57.0 79.0 41.0 12.1 44.0

صفحات مرتبط

منبع:ویژگی inline-size CSS

منبع:ویژگی min-inline-size CSS

منبع:ویژگی max-height CSS

منبع:ویژگی max-width CSS

منبع:ویژگی writing-mode CSS