fit-content
fit-content
关键字等效于 fit-content(stretch)
。在实践中,这意味着盒子将使用可用空间,但绝不会超过 max-content
。
当用作 width
、height
、min-width
、min-height
、max-width
和 max-height
的布局盒子大小时,最大和最小尺寸指的是内容大小。
注意:CSS 大小调整规范还定义了 fit-content()
函数。此页面详细介绍了关键字。
语法
css
width: fit-content;
block-size: fit-content;
示例
使用 fit-content 进行盒子大小调整
HTML
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
css
.container {
border: 2px solid #ccc;
padding: 10px;
width: 20em;
}
.item {
width: fit-content;
background-color: #8ca0ff;
padding: 5px;
margin-bottom: 1em;
}
结果
规范
规范 |
---|
CSS 盒子大小调整模块级别 4 # valdef-width-fit-content |
浏览器兼容性
BCD 表格仅在浏览器中加载
另请参阅
- 相关大小调整关键字:
min-content
、max-content
- CSS 盒子大小调整 模块