Свойство CSS `max-inline-size`
Базовая поддержка Широко доступно
Эта функция хорошо зарекомендовала себя и работает на многих устройствах и в разных версиях браузеров. Она доступна во всех браузерах с сентября 2021 года.
Свойство max-inline-size CSS задаёт максимальный горизонтальный или вертикальный размер блочной оси элемента в зависимости от режима письма. В зависимости от значения writing-mode оно соответствует свойству max-width или max-height.
Если режим письма вертикальный, значение max-inline-size определяет максимальную высоту элемента; в противном случае оно определяет максимальную ширину элемента. Связанное свойство max-block-size задаёт другой размер элемента.
Попробуйте
max-inline-size: 150px; writing-mode: horizontal-tb;
max-inline-size: 150px; writing-mode: vertical-rl;
max-inline-size: 20px; writing-mode: horizontal-tb;
max-inline-size: 75%; writing-mode: vertical-lr;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
This is a box where you can change the max-inline-size.
</div>
</section>
#example-element {
display: flex;
flex-direction: column;
background-color: #5b6dcd;
height: 80%;
justify-content: center;
color: white;
}
Синтаксис
/* <length> values */ max-inline-size: 300px; max-inline-size: 25em; max-inline-size: anchor-size(width); max-inline-size: anchor-size(--my-anchor self-block, 200px); /* <percentage> values */ max-inline-size: 75%; /* Keyword values */ max-inline-size: none; max-inline-size: max-content; max-inline-size: min-content; max-inline-size: fit-content; max-inline-size: fit-content(20em); /* Global values */ max-inline-size: inherit; max-inline-size: initial; max-inline-size: revert; max-inline-size: revert-layer; max-inline-size: unset;
Значения
Свойство max-inline-size принимает те же значения, что и свойства max-width и max-height.
Формальное определение
| Начальное значение | none |
|---|---|
| Применяется к | так же, как width и height
|
| Наследуется | нет |
| Проценты | inline-size содержащего блока |
| Вычисленное значение | так же, как max-width и max-height
|
| Тип анимации | $1$, <a href="/en-US/docs/Web/CSS/Reference/Values/percentage#interpolation" title="Значения типа данных CSS <percentage> интерполируются как вещественные числа с плавающей точкой.">percentage</a> или calc(); |
Формальный синтаксис
max-inline-size =
<'max-width'>
Примеры
Задание максимального размера по строчной оси в пикселях
HTML
<p class="exampleText">Example text</p>
CSS
.exampleText {
writing-mode: vertical-rl;
background-color: yellow;
block-size: 100%;
max-inline-size: 200px;
}
Результат
Спецификации
| Спецификация |
|---|
| CSS Logical Properties and Values Module Level 1 # propdef-max-inline-size |
| CSS Box Sizing Module Level 3 # sizing-values |
Совместимость с браузерами
| Компьютеры | Мобильные устройства | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome для Android | Firefox для Android | Opera для Android | Safari в iOS | Samsung Internet | WebView для Android | WebView в iOS | |
max-inline-size |
57 |
79 |
41 |
44 |
12.1
10.1
|
57 |
41 |
43 |
12.2
10.3
|
7.0 |
57 |
12.2
10.3
|
anchor-size |
125 |
125 |
147 |
111 |
26 |
125 |
147 |
83 |
26 |
27.0 |
125 |
26 |
fit-content |
57 |
79 |
94
41
|
44 |
12.1 |
57 |
94
41
|
43 |
12.2 |
7.0 |
57 |
12.2 |
fit-content_function |
Нет |
Нет |
91 |
Нет |
Нет |
Нет |
Нет |
Нет |
Нет |
Нет |
Нет |
Нет |
max-content |
57 |
79 |
66
41
|
44 |
12.1 |
57 |
66
41
|
43 |
12.2 |
7.0 |
57 |
12.2 |
min-content |
57 |
79 |
66
41
|
44 |
12.1 |
57 |
66
41
|
43 |
12.2 |
7.0 |
57 |
12.2 |
none |
57 |
79 |
41 |
44 |
12.1 |
57 |
41 |
43 |
12.2 |
7.0 |
57 |
12.2 |
stretch |
138 |
138 |
Нет |
122 |
27 |
138 |
Нет |
91 |
27 |
30.0 |
138 |
27 |
См. также
- Соответствующие физические свойства:
max-widthиmax-height writing-mode
© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/max-inline-size
