【微信小程序】网格布局

这篇文章用来展示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
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容