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 初始定义

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 57
Full support 57
Full support 29
Disabled
Disabled From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Full support 12Firefox Full support 52
Full support 52
Full support 40
Disabled
Disabled 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.
IE ? Opera Full support 44
Full support 44
Full support 28
Disabled
Disabled From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari Full support 10.1WebView Android No support NoChrome Android ? Edge Mobile Full support 12Firefox Android Full support 52
Full support 52
Full support 40
Disabled
Disabled 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.
Opera Android No support NoSafari iOS Full support 10.3Samsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
User must explicitly enable this feature.
User must explicitly enable this feature.

参考

文档标签和贡献者

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