小程序 首页弹性盒子 排列

 1.页面  wxml

<!-- 首页 弹性盒子 -->
<view class="menu">
<navigator url="" class="menu-item">
 <image src="/pages/image/banner/1.jpg" mode="widthFix" class="menu-img"></image>
<text class="menu-name">XXX</text>
</navigator>
<navigator url="" class="menu-item">
 <image src="/pages/image/banner/2.jpg" mode="widthFix" class="menu-img"></image>
<text class="menu-name">XXX</text>
</navigator>
<navigator url="" class="menu-item">
 <image src="/pages/image/banner/3.jpg" mode="widthFix" class="menu-img"></image>
<text class="menu-name">XXX</text>
</navigator>
<navigator url="" class="menu-item">
 <image src="/pages/image/banner/4.jpg" mode="widthFix" class="menu-img"></image>
<text class="menu-name">XXX</text>
</navigator>
<navigator url="" class="menu-item">
 <image src="/pages/image/banner/1.jpg" mode="widthFix" class="menu-img"></image>
<text class="menu-name">XXX</text>
</navigator>
<navigator url="" class="menu-item">
 <image src="/pages/image/banner/1.jpg" mode="widthFix" class="menu-img"></image>
<text class="menu-name">XXX</text>
</navigator>
<navigator url="" class="menu-item">
 <image src="/pages/image/banner/1.jpg" mode="widthFix" class="menu-img"></image>
<text class="menu-name">XXX</text>
</navigator>
<navigator url="" class="menu-item">
 <image src="/pages/image/banner/1.jpg" mode="widthFix" class="menu-img"></image>
<text class="menu-name">XXX</text>
</navigator>
<navigator url="" class="menu-item">
 <image src="/pages/image/banner/1.jpg" mode="widthFix" class="menu-img"></image>
<text class="menu-name">XXX</text>
</navigator>
<navigator url="" class="menu-item">
 <image src="/pages/image/banner/1.jpg" mode="widthFix" class="menu-img"></image>
<text class="menu-name">XXX</text>
</navigator>
</view>

2.样式设计

.menu{
  display: flex;
  flex-wrap: wrap;
}
.menu-item{
  width: 20%;
  padding:5px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.menu-img{
  width: 100%;
}
.menu-name{
  font-size: 24rpx;
  display: flex;
  justify-content: center;
  padding-top: 10rpx;
}