设置最小值 最大值函数 | minmax
minmax
minmax()定义大于或等于 min 且小于或等于 max 的大小范围。
/* <inflexible-breadth>, <track-breadth> values */
minmax(200px, 1fr)
minmax(400px, 50%)
minmax(30%, 300px)
minmax(100px, max-content)
minmax(min-content, 400px)
minmax(max-content, auto)
minmax(auto, 300px)
minmax(min-content, auto)
/* <fixed-breadth>, <track-breadth> values */
minmax(200px, 1fr)
minmax(30%, 300px)
minmax(400px, 50%)
minmax(50%, min-content)
minmax(300px, max-content)
minmax(200px, auto)
/* <inflexible-breadth>, <fixed-breadth> values */
minmax(400px, 50%)
minmax(30%, 300px)
minmax(min-content, 200px)
minmax(max-content, 200px)
minmax(auto, 300px)
语法
一个函数采取两个参数，最小值和最大值。
每个参数可以是<length>，一个<percentage>，一个<flex>值，或关键字值中的一个max-content，min-content或auto。
如果max <min，则忽略max，并将minmax(min,max)其视为最小值。作为最大值，一个<flex>值设置网格轨道的弹性系数; 它至少是无效的。
取值
<length>非负长度
形式语法
minmax( [ <length> | <percentage> | <flex> | min-content | max-content | auto ] , [ <length> | <percentage> | <flex> | min-content | max-content | auto ] )
例
CSS内容
#container {
display: grid;
grid-template-columns: minmax(max-content, 300px) minmax(200px, 1fr) 150px;
grid-gap: 5px;
box-sizing: border-box;
height: 200px;
width: 100%;
background-color: #8cffa0;
padding: 10px;
}
#container > div {
background-color: #8ca0ff;
padding: 5px;
}
HTML内容
<div id="container">
<div>
Item as wide as the content,<br/>
but at most 300 pixels.
</div>
<div>
Item with flexible width but a minimum of 200 pixels.
</div>
<div>
Inflexible item of 150 pixels width.
</div>
</div>
结果
规范
| Specification | Status | Comment |
|---|---|---|
| CSS Grid LayoutThe definition of 'minmax()' in that specification. | Candidate Recommendation | Initial definition |
浏览器兼容性
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | 57.01 | No support3 | 52.0 (52.0)2 | No support3 | 444 | 10.1 |
| Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | No support | 52.0 (52.0)2 | No support3 | No support | 10.3 |
