这篇文章用来展示2种微信小程序中的网格布局,主要针对
1.网格的形成
2.网格间的平等间距
一、使用display:flex的方式
主要用到的属性
display: flex; //横向布局
flex-wrap: wrap; //屏幕宽度放不下下一项时自动换行
justify-content: space-between // 一行的子项 两端对齐,项目之间的间隔都相等。
效果图
页面代码
缺陷:每一行的头尾两项是贴边的
有点:代码简单,不用考虑间隙的计算,只用控制每一项的宽
使用计算左右边距的方法
效果图
二、使用float:left的方法
主要属性
float:left
效果图
样式代码