【微信小程序】網(wǎng)格布局

這篇文章用來展示2種微信小程序中的網(wǎng)格布局，主要針對
1.網(wǎng)格的形成
2.網(wǎng)格間的平等間距

一、使用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
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容