【微信小程序】网格布局

这篇文章用来展示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