最近刚接手了新公司的电商类小程序,这种电商类小程序,数据列表展示类的东西非常多,前人用浮动和flex布局处理了一些东西,所以我在这里研究了一下响应式布局,flex布局和grid布局。
flex布局
flex布局也是我用的较多的布局方式,当然没有研究的很细致,但是日常业务需求来说目前够用。
这里就不详细介绍flex布局的基本知识了,有想法的可以参考这个网址很形象:https://www.cnblogs.com/dreamperson/p/9367008.html
这里主要记录一下flex:1和flex-grow:1的区别:
我一开始学习的时候看了文档,用flex-grow:1来使元素填充容器剩下的空间。当初用的时候没发现有什么问题,但是到现在的时候由于元素里内容变多,展示的时候就出现问题了。查了一下才知道是这么回事(在此先记录一下,有空再详细解释):
- flex = 1 的时候,设置了 三个属性
flex-grow=1,flex-shrink=1,flex-basis=0%
- 只设置 flex-grow =1 的时候
flex-grow=1,flex-shrink=1(默认值),flex-basis=auto(默认值)
参考网址:https://my.oschina.net/u/3060934/blog/1583663
grid布局
grid布局是我看了微信公众号推送过来了,看了看感觉还不错,就开始简单的学习用用看。
原文网址:https://www.freecodecamp.org/news/learn-css-grid-in-5-minutes-f582e87b1228/(英文版)
中文:https://mp.weixin.qq.com/s/u7DpiqQWWoxnZJzMrm4S6w
简单用法:
{
display: grid;
grid-gap: 15rpx; //间距
/*grid-template-columns:1fr 1fr 1fr; 设置列宽 1:1:1 */
grid-template-columns: repeat(3,1fr); //跟上面效果一致,详细可以看参考网址
grid-template-rows:50px 50px; 设置行高(个人感觉一般不设置,都是内部撑开)
/*grid-template-rows: repeat(2, 50px);*/跟以上效果一致
}
repeat函数 : 这是一个强大的指定列和行的方法.(暂无仔细研究)
auto-fit:跳过固定数量的列,将3替换为自适应数量
{
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(auto-fit, 100px);
grid-template-rows: repeat(2, 100px);
}
minmax():minmax()函数定义的范围大于或等于 min, 小于或等于 max。如
{
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-template-rows: repeat(2, 100px);
}
差不多了,编不下去了,打扰了,记录一下为主。详细的看我发的网址把。