CSS函数minmax()定义了一个长宽范围的闭区间, 它与CSS网格布局一起使用。

/* <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-contentmin-content、或auto之一。

如果 最大值 < 最小值,则最大值被忽略并且minmax(最小值,最大值)被看成最小值<flex> 值作为最大值时设置网格轨道的弹性系数;作为最小值时无效。

取值

<length>
非负长度。
<percentage>
相对于列轨道中网格容器的内联大小的非负百分比,以及行轨道中网格容器的块长宽。 如果网格容器的长宽取决于其轴的长宽,则<percentage> 必须取值为autouser agent 可将轨道的内部长宽贡献调整为网格容器的长宽,并按将导致百分比达到的最小值来增加轨道的最终长宽。
<flex>
单位为fr的非负维度,指定轨道弹性布局的系数值。每个<flex>长度的轨道都以其系数值比例均分剩余空间。
max-content
表示网格的轨道长度自适应内容最大的那个单元格。
min-content
表示网格的轨道长度自适应内容最小的那个单元格。
auto
作为最大值时,等价于 max-content。作为最小值时,它表示轨道中单元格最小长宽 (由min-width/min-height)的最大值。

正式语法

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>

Result

规范

规范 状态 备注
CSS Grid Layout
minmax()
Candidate Recommendation 初始定义

浏览器兼容性

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support

57

291

12

52

402

?

44

283

10.1
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support No ?12

52

402

No10.3 ?

1. From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.

2. From version 40: this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

3. From version 28: this feature is behind the Enable experimental Web Platform features preference.

参考

文档标签和贡献者

此页面的贡献者: chentao106
最后编辑者: chentao106,