minmax()

基线 广泛可用

此功能已完善，可在许多设备和浏览器版本中使用。它自以下时间起在所有浏览器中可用： 2020 年 7 月.

minmax() CSS 函数 定义了一个大小范围，大于或等于min，小于或等于max。它与 CSS 网格 一起使用。

试一试

语法

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)

一个接受两个参数min 和max 的函数。

每个参数可以是<length>、<percentage>、<flex> 值，或其中一个关键字值max-content、min-content 或auto。

如果max < min，则忽略max，并将minmax(min,max) 视为min。作为最大值，<flex> 值设置网格轨道的弹性因子；它作为最小值无效。

值

<length>

一个非负长度。

<percentage>

相对于列网格轨道中网格容器的内联大小和行网格轨道中网格容器的块大小的非负百分比。如果网格容器的大小取决于其轨道的尺寸，则<percentage> 必须视为auto。用户代理 可以调整轨道对网格容器大小的内在尺寸贡献，并通过最小数量增加轨道的最终尺寸，从而使百分比得到尊重。

<flex>

一个非负维度，单位为fr，指定轨道的弹性因子。每个<flex> 大小的轨道都会根据其弹性因子按比例占用剩余空间。

max-content

表示占据网格轨道的网格项目的最大 max-content 贡献。

min-content

表示占据网格轨道的网格项目的最大 min-content 贡献。

auto

作为min，它表示占据网格轨道的网格项目的最大最小尺寸（由 min-width/min-height 指定）。作为max，它与max-content 相同。但是，与max-content 不同，它允许 align-content 和 justify-content 属性值（如normal 和stretch）扩展轨道。

正式语法

<minmax()> = 
  minmax( min , max )

CSS 属性

minmax() 函数可用于

示例

CSS

css
#container {
  display: grid;
  grid-template-columns: minmax(min-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

html
<div id="container">
  <div>Item as wide as the content, 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>

结果

规范

规范
CSS 网格布局模块级别 2
# funcdef-grid-template-columns-minmax

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅