fit-content()
CSS
function
clamps a given size to an available size according to the formula
min(
maximum size
, max(
minimum size
,
argument
))
.
The function can be used as a track size in
CSS Grid
properties, where the maximum size is defined by
max-content
and the minimum size by
auto
, which is calculated similar to
auto
(即，
minmax(auto, max-content)
), except that the track size is clamped at
argument
if it is greater than the
auto
minimum.
The function can also be used as laid out box size for
width
,
height
,
min-width
,
min-height
,
max-width
and
max-height
, where the maximum and minimum sizes refer to the content size.
fit-content()
function accepts a
<length>
或
<percentage>
as an argument.
/* <length> values */ fit-content(200px) fit-content(5cm) fit-content(30vw) fit-content(100ch) /* <percentage> value */ fit-content(40%)
<length>
An absolute length.
<percentage>
A percentage relative to the available space in the given axis.
In grid properties it is relative to the inline size of the grid container in column tracks and to the block size of the grid container for row tracks. Otherwise it is relative to the available inline size or block size of the laid out box depending on the writing mode.
<div id="container">
<div>Item as wide as the content.</div>
<div>
Item with more text in it. Because the contents of it are
wider than the maximum width, it is clamped at 300 pixels.
</div>
<div>Flexible item</div>
</div>
#container {
display: grid;
grid-template-columns: fit-content(300px) fit-content(300px) 1fr;
grid-gap: 5px;
box-sizing: border-box;
height: 200px;
width: 100%;
background-color: #8cffa0;
padding: 10px;
}
#container > div {
background-color: #8ca0ff;
padding: 5px;
}
| 规范 | 状态 | 注释 |
|---|---|---|
|
CSS Box Sizing Module Level 3
The definition of 'fit-content()' in that specification. |
工作草案 |
Defines the function as laid out box size for
width
,
height
,
min-width
,
min-height
,
max-width
and
max-height
.
|
|
CSS 栅格布局
The definition of 'fit-content()' in that specification. |
候选推荐 | Defines the function when used as a track size. |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
fit-content
|
Chrome
完整支持
46
|
Edge 完整支持 79 |
Firefox
完整支持
3
Prefixed
|
IE 不支持 No |
Opera
完整支持
33
|
Safari
完整支持
11
|
WebView Android
完整支持
46
|
Chrome Android
完整支持
46
|
Firefox Android
完整支持
4
Prefixed
|
Opera Android
完整支持
33
|
Safari iOS
完整支持
11
|
Samsung Internet Android
完整支持
5.0
|
完整支持
不支持
使用非标名称。
要求使用供应商前缀或不同名称。
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
fit-content()
|
Chrome 完整支持 29 | Edge 完整支持 16 | Firefox 完整支持 51 | IE 不支持 No | Opera 完整支持 44 | Safari 完整支持 10.1 | WebView Android 完整支持 57 | Chrome Android 完整支持 57 | Firefox Android 完整支持 51 | Opera Android 完整支持 43 | Safari iOS 完整支持 10.3 | Samsung Internet Android 完整支持 6.0 |
完整支持
不支持
min-content
,
max-content
grid-template
,
grid-template-rows
,
grid-template-columns
,
grid-template-areas
,
grid-auto-columns
,
grid-auto-rows
,
grid-auto-flow