ویژگی max-inline-size CSS
- صفحه قبلی max-height
- صفحه بعدی max-width
تعریف و استفاده
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 |
صفحات مرتبط
منبع:ویژگی min-inline-size CSS
منبع:ویژگی max-height CSS
منبع:ویژگی max-width CSS
- صفحه قبلی max-height
- صفحه بعدی max-width