Свойство CSS `inline-size`
Базовая поддержка Широко доступно
Эта функция хорошо зарекомендовала себя и работает на многих устройствах и во многих версиях браузеров. Она доступна во всех браузерах с сентября 2021 года.
Свойство inline-size CSS задаёт размер блочной части элемента вдоль строчной оси. Если writing-mode горизонтальный, свойство соответствует width; если режим письма вертикальный, оно соответствует height. Связанное свойство block-size задаёт другой размер элемента.
Попробуйте
inline-size: 150px; writing-mode: horizontal-tb;
inline-size: 150px; writing-mode: vertical-rl;
inline-size: auto; writing-mode: horizontal-tb;
inline-size: auto; 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 inline-size.
</div>
</section>
#example-element {
display: flex;
flex-direction: column;
background-color: #5b6dcd;
height: 80%;
justify-content: center;
color: white;
}
Синтаксис
/* <length> values */ inline-size: 300px; inline-size: 25em; inline-size: anchor-size(width); inline-size: anchor-size(--my-anchor inline); /* <percentage> values */ inline-size: 75%; /* Keyword values */ inline-size: max-content; inline-size: min-content; inline-size: fit-content; inline-size: fit-content(20em); inline-size: auto; /* Global values */ inline-size: inherit; inline-size: initial; inline-size: revert; inline-size: revert-layer; inline-size: unset;
Значения
Свойство inline-size принимает те же значения, что и свойства width и height.
Формальное определение
| Исходное значение | auto |
|---|---|
| Применяется к | то же, что и width и height
|
| Наследуется | нет |
| Проценты | inline-size содержащего блока |
| Вычисленное значение | то же, что и width и height
|
| Тип анимации | $1$, <a href="/en-US/docs/Web/CSS/Reference/Values/percentage#interpolation" title="Значения CSS-типа данных <percentage> интерполируются как действительные числа с плавающей точкой.">процентное значение</a> или calc(); |
Формальный синтаксис
inline-size =
<'width'>
Примеры
Задание строчного размера в пикселях
HTML
<p class="exampleText">Example text</p>
CSS
.exampleText {
writing-mode: vertical-rl;
background-color: yellow;
inline-size: 110px;
}
Результат
Спецификации
| Спецификация |
|---|
| Модуль логических свойств и значений CSS, уровень 1 # dimension-properties |
| Модуль CSS Box Sizing, уровень 3 # sizing-values |
Совместимость с браузерами
| Настольные компьютеры | Мобильные устройства | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome для Android | Firefox для Android | Opera для Android | Safari для iOS | Samsung Internet | WebView для Android | WebView для iOS | |
inline-size |
57
8
|
79
79
|
41 |
44
15
|
12.1
5.1
|
57
18
|
41 |
43
14
|
12.2
5
|
7.0
1.0
|
57
4.4
|
12.2
5
|
anchor-size |
125 |
125 |
147 |
111 |
26 |
125 |
147 |
83 |
26 |
27.0 |
125 |
26 |
auto |
8 |
79 |
41 |
15 |
5.1 |
18 |
41 |
14 |
5 |
1.0 |
4.4 |
5 |
fit-content |
57 |
79 |
94
41
|
44 |
12.1 |
57 |
94
41
|
43 |
12.2 |
5.0 |
57 |
12.2 |
fit-content_function |
Нет |
Нет |
91 |
Нет |
Нет |
Нет |
Нет |
Нет |
Нет |
Нет |
Нет |
Нет |
max-content |
57 |
79 |
66
41
|
44 |
12.1 |
57 |
66
41
|
43 |
12.2 |
5.0 |
57 |
12.2 |
min-content |
57 |
79 |
66
41
|
44 |
12.1 |
57 |
66
41
|
43 |
12.2 |
5.0 |
57 |
12.2 |
stretch |
138 |
138 |
Нет |
122 |
27 |
138 |
Нет |
91 |
27 |
30.0 |
138 |
27 |
См. также
- Соответствующие физические свойства:
widthи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/inline-size
