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