微信小程序开发

【微信小程序】网格布局

2020-03-17  本文已影响0人  tmyzh

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

猜你喜欢

热点阅读