這篇文章用來展示2種微信小程序中的網(wǎng)格布局，主要針對
1.網(wǎng)格的形成
2.網(wǎng)格間的平等間距
一、使用display:flex的方式
主要用到的屬性
display: flex; //橫向布局
flex-wrap: wrap; //屏幕寬度放不下下一項(xiàng)時自動換行
justify-content: space-between // 一行的子項(xiàng) 兩端對齊，項(xiàng)目之間的間隔都相等。
效果圖
image.png
頁面代碼
樣式代碼
布局代碼
缺陷：每一行的頭尾兩項(xiàng)是貼邊的
有點(diǎn)：代碼簡單，不用考慮間隙的計(jì)算，只用控制每一項(xiàng)的寬
使用計(jì)算左右邊距的方法
image.png
效果圖
image.png
二、使用float:left的方法
主要屬性
float:left
效果圖
image.png
樣式代碼
image.png
