微信小程序商城15天从零实战视频课程-知识点-1行4列的布局

wxml代码

<!--1行4个图片的布局-带文字-->
<view class="navs">
  <view class="nav-item" >
     <image src='/images/menu01.png' class="nav-image"/><text >品牌大全</text>
  </view>
  <view class="nav-item" >
     <image src='/images/menu02.png' class="nav-image"/><text >最新上架</text>
  </view>  
  <view class="nav-item" >
     <image src='/images/menu03.png' class="nav-image"/><text >精品推荐</text>
  </view>  
  <view class="nav-item" >
     <image src='/images/menu04.png' class="nav-image"/><text >销售排行</text>
  </view>      
</view>

---------------------------
<!--1行4个图片的布局-不带文字-->
<view class="navs">
  <view class="nav-item" >
     <image src='/images/menu01.png' class="nav-image"/>
  </view>
  <view class="nav-item" >
     <image src='/images/menu02.png' class="nav-image"/>
  </view>  
  <view class="nav-item" >
     <image src='/images/menu03.png' class="nav-image"/>
  </view>  
  <view class="nav-item" >
     <image src='/images/menu04.png' class="nav-image"/>
  </view>      
</view>

wxss代码

/*菜单样式：1行4列图片的布局*/
.navs {
  display: flex;
}
.nav-item {
  width: 25%;  /*百分比：对应的4列*/
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 20rpx;
}

.nav-item .nav-image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
}

.nav-item text {
  padding-top: 20rpx;
  font-size: 25rpx;
}

欢迎大家收看我的****：微信小程序商城15天从零实战视频课程
https://edu.****.net/course/detail/19437