CSS参考手册
网格布局 | Grid Layout
设置最小值 最大值函数 | 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>
非负长度
<percentage>
与列网格轨道中的网格容器的内联大小相关的非负百分比以及行网格轨道中的网格容器的块大小。如果网格容器的大小取决于其轨道的大小,则<percentage>
必须将其视为auto
。UA可以将轨道的固有尺寸贡献调整为网格容器的尺寸,并且以最小的量增加轨道的最终尺寸,以达到百分比。
<flex>
具有fr
指定单位的非负尺寸赛道的弹性因素。每<flex>
max-content表示占用网格轨道的网格项目的最大最大内容贡献.min-content表示占用网格项目的最大最小内容贡献。
min-content
表示占用网格轨道的网格项目的最大最小内容贡献。网格track.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>
结果
规范
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 |
网格布局 | Grid Layout相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。