fit-content
Базовая Широкодоступная
Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с ноября 2021 года.
Ключевое слово fit-content эквивалентно fit-content(stretch). На практике это означает, что блок будет использовать доступное пространство, но никогда не превысит max-content.
При использовании в качестве размера блока для width, height, min-width, min-height, max-width и max-height максимальные и минимальные размеры относятся к размеру содержимого.
Свойство interpolate-size и функция calc-size() могут использоваться для включения анимаций к и от fit-content.
Примечание: Спецификация CSS Sizing также определяет функцию fit-content(). На этой странице подробно описывается ключевое слово.
Синтаксис
width: fit-content; block-size: fit-content;
Примеры
Использование fit-content для размеров блока
HTML
<div class="container">
<div class="item">Item</div>
<div class="item">Item with more text in it.</div>
<div class="item">
Item with more text in it, hopefully we have added enough text so the text
will start to wrap.
</div>
</div>
CSS
.container {
border: 2px solid #ccc;
padding: 10px;
width: 20em;
}
.item {
width: fit-content;
background-color: #8ca0ff;
padding: 5px;
margin-bottom: 1em;
}
Результат
Спецификации
Совместимость браузеров
| Рабочий стол | Мобильный | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox for Android | Opera Android | Safari на IOS | Samsung Internet | WebView Android | |
fit-content |
46221–48 | 7979 | 943 | 331515–35 | 1172 | 462518–48 | 944 | 331414–35 | 1171 | 5.01.51.0–5.0 | 464.44.4–48 |
См. также
- Связанные ключевые слова для размеров:
min-content,max-content - Модуль CSS box sizing
© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content
