minmax()

描述

CSS函数minmax()从词义上来看就是一个最大值与一个最小值，定义了一个长宽范围的闭区间，， 它与CSS网格布局一起使用。

语法

此函数包含两个参数，最小值 和 最大值.

每个参数分别是<length>、<percentage>、<flex>的一种，或者是max-content、min-content、或auto之一。

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

取值

• <length>

  非负长度。

• <percentage>

  相对于列轨道中网格容器的内联大小的非负百分比，以及行轨道中网格容器的块长宽。 如果网格容器的长宽取决于其轴的长宽，则<percentage> 必须取值为auto。user agent 可将轨道的内部长宽贡献调整为网格容器的长宽，并按将导致百分比达到的最小值来增加轨道的最终长宽。

• <flex>

  单位为fr的非负维度，指定轨道弹性布局的系数值。每个<flex>长度的轨道都以其系数值比例均分剩余空间。

• max-content

  表示网格的轨道长度自适应内容最大的那个单元格。

• min-content

  表示网格的轨道长度自适应内容最小的那个单元格。

• auto

  作为最大值时，等价于 max-content。作为最小值时，它表示轨道中单元格最小长宽 (由min-width/min-height)的最大值。

示例

/* <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)