微信小程序弹性盒布局（一行四列）

文章适合小白，零基础，或者没学过小程序的在职人员。

平常我们在支付宝上看到这样的效果，一排四个，每一排，上面是icon图片，下面是文字描述，今天我们就在小程序中实现这个效果。

只用到两个文件：.wxss文件和wxml文件

在wxml文件中：

<view class="menu">

<navigator url="" class="menu-item">

<image src="../../images/img-icon/tubiao-.png" mode="widthFix" class="menu-img"></image>

<text class="menu-name">商品大全</text>

</navigator>

</view>

<navigator>标签是页面链接，功能相当于js中的<a>标签，

<image>图片标签，属性src后面表示的是图片路径，mode也是图片属性，详情可以参考官网image | 微信开放文档

具体的代码布局就是这样的：

想加icon（图片）依次复制就可以了

.wxss文件代码：

.menu{

display: flex;        /*弹性布局*/

flex-wrap: wrap;     /*允许换行*/

}

.menu-item{

width: 25%;      /*一行排四个icon，每个icon占比25%*/

padding: 5px;     /*icon与icon的距离*/

}

.menu-img{

width:100%;   /*25%的100%*/

}

还有一个重点就是如果不加box-sizing: border-box;，效果就是这样的，不在一行，所以要在.menu-item加上这个，具体原因还要看原生js了，在这里就不做赘述了。

.menu-item{

width: 25%;

padding: 5px;

box-sizing: border-box;

}

加上之后就变成一排了

考虑到页面更好看，还可以在加上以下代码：