这篇文章发布于 2019年11月30日,星期六,17:59,归类于 CSS相关。 阅读 28016 次, 今日 12 次 9 条评论
by zhangxinxu 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( [ <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
。
说明
minmax(min, max)
中,如果min
的计算值比max
还要大,则max
的值会被忽略。<flex>
数据类型不能作为min
参数使用。- 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
(本篇完)
- CSS repeat()函数详细介绍 (0.996)
- CSS Grid布局中的subgrid的适用场景 (0.299)
- Oh My God,CSS flex-basis原来有这么多细节 (0.168)
- 理解CSS3 max/min-content及fit-content等width值 (0.165)
- 深入理解CSS的width:auto (0.165)
- 这啥?CSS calc-size和interpolate-size,真学不动了 (0.165)
- 了解CSS min()/max()/clamp()数学函数 (0.133)
- 让CSS flex布局最后一行列表左对齐的N种方法 (0.110)
- JS字符串补全方法padStart()和padEnd()简介 (0.107)
- 有人考了我一道CSS题目 (0.076)
- JavaScript实现图片幻灯片滚动播放动画效果 (RANDOM - 0.004)
鑫旭大佬我有个疑问,我在Mac上用Chrome打开后发现页面不支持inset属性,查了一下发现只有火狐支持,所以他的边框已经变得不可查看了,不知道这个图表之间的边框是怎么实现的呢?在除了FireFox的浏览器上有没有替代或者fallbakc方法呢?
使用
{
top: 1px;
bottom: 1px;
left: 1px;
right: 1px;
}
代替
{
inset: 1px;
}
分割线的实现是真的巧妙?
margin: -1px;神来之笔
私立是啥意思啊
四列。
给的例子有grid, 但是那个中间件的竖线和底部横线没有啊,不知道是怎么弄的,希望补一个完整的例子
inset:1px 去了 换掉就可以了
四行