CSS minmax()函数简介

这篇文章发布于 2019年11月30日,星期六,17:59,归类于 CSS相关。 阅读 28016 次, 今日 12 次 9 条评论

 

CSS minmax文章占位图

引言么么哒

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

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

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( [ <length> | <percentage> | <flex> | min-content | max-content | auto ] , [ <length> | <percentage> | <flex> | min-content | max-content | auto ] )

参数

<length>
具体的尺寸值,例如150px,30vw等。
<percentage>
百分比值。
<flex>
<flex>数据类型表示grid容器可伸缩的长度,如1fr, 1.5fr。具体参见这篇文章:“CSS值类型大全
min-content
最小内容尺寸。具体含义可参见这篇文章
max-content
最大内容尺寸。具体含义可参见这篇文章
auto
出现出现在min的参数位置,则作用等同于min-content,如果出现在max参数位置,作用等同于max-content

说明

  1. minmax(min, max)中,如果min的计算值比max还要大,则max的值会被忽略。
  2. <flex>数据类型不能作为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])

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

么么哒

(本篇完)

分享到:


发表评论(目前9 条评论)

  1. 奥兰度说道:

    鑫旭大佬我有个疑问,我在Mac上用Chrome打开后发现页面不支持inset属性,查了一下发现只有火狐支持,所以他的边框已经变得不可查看了,不知道这个图表之间的边框是怎么实现的呢?在除了FireFox的浏览器上有没有替代或者fallbakc方法呢?

  2. featherPity说道:

    分割线的实现是真的巧妙?

  3. yancy说道:

    私立是啥意思啊