CSS minmax()函数简介

byzhangxinxu from https://www.zhangxinxu.com/wordpress/?p=9105

本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。

引言么么哒

去年虽然有专门介绍过CSS grid布局，见“ 写给自己看的display: grid布局教程 ”。但是其中的内容和语法都是基础版，后来随着Grid布局规范的成熟，各大浏览器又支持了多个全新的语法特性，其中一个很重要的特性就是CSS minmax() 函数。

目前该函数的 兼容性 如下：

移动端项目可以放心使用的有木有？有！

内网项目可以放心使用的有木有？有！

学习价值很高的有木有？众人：额……

亲们！醒醒！

minmax() 可不是普通的函数，她可以让你心旷神怡，蓬荜生辉。是修士心中的筑基丹，女巫心中的天圣山。集天地精华浩然正气于一体，散万丈光芒春风雨露于万物。

可以这么说，尚未支持 minmax() 函数的Grid布局就像夏天的袜子——可有可无。虽然名声很响，看起来也不错，不过语法有点多，学起来有点累，又有替代的实现方法，为什么要非你不可呢？

而支持 minmax() 函数的Grid布局就像拥有了世间无双的独门绝学，方圆百里，只此一家，无可取代，实现的效果天地撼动万马奔腾剑指九霄。

不信你看。

眼见为实的实例

本周小测 让大家实现如下图所示的布局，关键是中间分隔线，需要无论是私立还是三行，都能够显示良好，还是有一定难度的。

但是，如果使用Grid布局，配合 minmax() 函数，则非常智能的布局效果就出来了。

比方说 这位同学的实现 （codepen网址）。

可以参考下面的视频录屏效果（不动点击播放）：

其中，实现的关键代码就是下面这两行：

.container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

其中 minmax(150px, 1fr) 的含义是每一个列的宽度最小是150像素，最大是1fr，也就是等分宽度。

假设容器现在的宽度是500像素，此时每一列的宽度应该是 166.67px ，因为此时一定是三列，因为每一列的最小宽度是150像素，至少应该是500/150列，由于有 1fr 的最大宽度限制，因此，每一列的宽度是3列等分尺寸也就是 500px/3 。

一个智能的弹性的布局效果就这样达成了，而且这种弹性布局是二维层面的。Table布局的弹性变化是1维的，因为列数无法变化。

语法、参数与说明

语法

minmax(min, max)
minmax( [  |  |  | min-content | max-content | auto ] , [  |  |  | min-content | max-content | auto ] )

参数

具体的尺寸值，例如150px，30vw等。

百分比值。

数据类型表示grid容器可伸缩的长度，如
1fr ,
1.5fr 。具体参见这篇文章：“CSS值类型大全”

min-content

最小内容尺寸。具体含义可参见这篇文章。

max-content

最大内容尺寸。具体含义可参见这篇文章。

auto

出现出现在min的参数位置，则作用等同于
min-content ，如果出现在max参数位置，作用等同于
max-content 。

说明

1. minmax(min, max) 中，如果 min 的计算值比 max 还要大，则 max 的值会被忽略。
2. 数据类型不能作为 min 参数使用。
3. minmax函数只能用在下面4个CSS属性中：
   • grid-template-columns
   • grid-template-rows
   • grid-auto-columns
   • grid-auto-rows

示意

下面是用法，都是合法的，源自 MDN文档 ：

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)

结语么么哒

哦忘记说了，CSS Grid布局发生蜕变开始剑指九霄还离不开一个函数，那就是CSS repeat() 函数。

例如下面一些使用示意：

repeat(4, 1fr)
repeat(4, [col-start] 250px [col-end])
repeat(4, [col-start] 60% [col-end])
repeat(4, [col-start] 1fr [col-end])
repeat(4, [col-start] min-content [col-end])
repeat(4, [col-start] max-content [col-end])
repeat(4, [col-start] auto [col-end])
repeat(4, [col-start] minmax(100px, 1fr) [col-end])
repeat(4, [col-start] fit-content(200px) [col-end])
repeat(4, 10px [col-start] 30% [col-middle] auto [col-end])
repeat(4, [col-start] min-content [col-middle] max-content [col-end])
repeat(auto-fill, 250px)
repeat(auto-fit, 250px)
repeat(auto-fill, [col-start] 250px [col-end])
repeat(auto-fit, [col-start] 250px [col-end])
repeat(auto-fill, [col-start] minmax(100px, 1fr) [col-end])
repeat(auto-fill, 10px [col-start] 30% [col-middle] 400px [col-end])

看起来还有点复杂哟，这个函数我们下回分解。

本文为原创文章，欢迎分享，勿全文转载，如果实在喜欢，可收藏，永不过期，且会及时更新知识点及修正错误，阅读体验也更好。

本文地址： https://www.zhangxinxu.com/wordpress/?p=9105

（本篇完）