响应式布局学习，flex布局的flex-grow:1和flex:1区别，grid布局初学习（小程序）

最近刚接手了新公司的电商类小程序，这种电商类小程序，数据列表展示类的东西非常多，前人用浮动和flex布局处理了一些东西，所以我在这里研究了一下响应式布局，flex布局和grid布局。

flex布局

flex布局也是我用的较多的布局方式，当然没有研究的很细致，但是日常业务需求来说目前够用。

这里就不详细介绍flex布局的基本知识了，有想法的可以参考这个网址很形象：https://www.cnblogs.com/dreamperson/p/9367008.html

这里主要记录一下flex:1和flex-grow:1的区别：

我一开始学习的时候看了文档，用flex-grow:1来使元素填充容器剩下的空间。当初用的时候没发现有什么问题，但是到现在的时候由于元素里内容变多，展示的时候就出现问题了。查了一下才知道是这么回事（在此先记录一下，有空再详细解释）:

1. flex = 1 的时候，设置了 三个属性
   flex-grow=1，flex-shrink=1，flex-basis=0%
    
2. 只设置 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);
}

差不多了，编不下去了，打扰了，记录一下为主。详细的看我发的网址把。