Max-inline-size - CSS-хитрощі | Альманах CSS 2025

max-inline-sizeє логічною властивістю в CSS, яка визначає максимальну ширину елемента, коли writing-modeгоризонталь, або максимальну висоту елемента, коли writing-modeвертикаль.

.element ( max-inline-size: 500px; writing-mode: vertical-lr; )

Як ви могли здогадатися на прикладі вище, writing-modeвластивість змінює орієнтацію тексту та макета на 90 градусів.

Основною причиною зміни орієнтації, крім створення вигадливих дизайнів, є пристосування інтернаціоналізації на сайті. Багато східноазіатських писемностей, таких як китайська, японська та корейська, можуть бути написані горизонтально або вертикально. Використовуючи логічні властивості, ми можемо забезпечити правильний напрямок розміру елементів на основі режиму запису користувача.

У Джен Сіммонс є стаття та презентація, які заглиблюються в режими написання CSS.

Чи не можемо ми просто скористатися `max-width`власністю?

Так! Але якщо ви не підтримуєте Internet Explorer, немає жодної причини не використовувати його max-inline-size. max-widthє фізичним виміром, тому при зміні режиму запису елемент зберігає свій горизонтальний розмір ширини, порушуючи макет, коли він налаштований на вертикальний. Логічні властивості, наприклад max-inline-size, можуть реагувати на ці зміни та застосовувати розмір у правильній орієнтації.

Синтаксис

max-inline-size: ;

Початковий: auto
Застосовується до: те саме, що heightіwidth
Успадковано: ні
Відсотки: як для відповідної фізичної властивості
Обчислене значення: те саме, що heightіwidth
Тип анімації: за типом обчислюваного значення

Цінності

/* Length values */ max-inline-size: 250px; max-inline-size: 5rem;   /* Percentage values */ max-inline-size: 75%;   /* Keyword values */ max-inline-size: auto; max-inline-size: fit-content(5rem); max-inline-size: max-content; max-inline-size: min-content;   /* Global values */ max-inline-size: inherit; max-inline-size: initial; max-inline-size: unset;

Демо

Якщо writing-modeвстановлено значення vertical-rl, вміст буде обертатися, змінюючи макет. Ширина max-widthполя буде обертатися разом із вмістом. Але max-inline-sizeце розумно! Він залишає свою ширину в такті, незалежно від writing-modeвартості. Увімкніть writing-modeу наступній демонстрації, щоб побачити різницю між ними.