一行显示4个，超出自动换行（解决办法）

先看一下问题吧

data() {
    return {
        myHealthAdminMenu: {
        name: '健康管理',
        list: [{
            name: '基础信息',
            image: $mAssetsPath.iconHealth1,
            isAstrict: false
        }, {
            name: '健康档案',
            image: $mAssetsPath.iconHealth2,
            isAstrict: false
        }, {
            name: '用药管理',
            image: $mAssetsPath.iconHealth3,
            isAstrict: true
        }, {
            name: '健康建议',
            image: $mAssetsPath.iconHealth4,
            isAstrict: true
        }, {
            name: '健康计划',
            image: $mAssetsPath.iconHealth5,
            isAstrict: true
        }, {
            name: '我的管理师',
            image: $mAssetsPath.iconHealth6,
            isAstrict: true
        }]
    },
    }
}

<!-- 健康管理 -->
    <view class="health-admin unify-margin">
      <!-- 标题 -->
      <view class="title">{{myHealthAdminMenu.name}}</view>
      
      <!-- 列表 -->
      <view class="admin-list unify-background-color unify-flex">
        <view class="admin-item" v-for="(item,index) in myHealthAdminMenu.list" :key="index">
          <image class="image" :src="item.image" mode=""></image>
          <view class="">{{item.name}}</view>
        </view>
      </view>
    </view>

公共css

// 健康管理列表
        .admin-list {
        height:  360rpx;
        border-radius: 20rpx;
        overflow: hidden;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;
        
        .admin-item {
          flex: 24%;
          text-align: center;
          font-size: $uni-font-size-sm;
          
          .image {
            width: 76rpx;
            height: 76rpx;
          }
        }
      }

第一种 

.admin-item:last-child:nth-child(4n - 1) {
          margin-right: calc(24% + 4% / 3);
        }
        
        .admin-item:last-child:nth-child(4n - 2) {  // 24的2倍  4的2倍
          margin-right: calc(48% + 8% / 3);
        }
        
        .admin-item:last-child:nth-child(4n - 3) {  // // 24的3倍  4的3倍
          margin-right: calc(72% + 12% / 3);
        }

第二种 使用方法：:class="{'admin-list-af3': myHealthAdmin.list.length / 4 == 1.25, 'admin-list-af2': myHealthAdmin.list.length / 4 == 1.5, 'admin-list-af1': myHealthAdmin.list.length / 4 == 1.75}"

.admin-item:last-child:nth-child(4n - 1) {
          margin-right: calc(24% + 4% / 3);
        }
        
        .admin-item:last-child:nth-child(4n - 2) {  // 24的2倍  4的2倍
          margin-right: calc(48% + 8% / 3);
        }
        
        .admin-item:last-child:nth-child(4n - 3) {  // // 24的3倍  4的3倍
          margin-right: calc(72% + 12% / 3);
        }

第三种

.admin-list { // 外层盒子
    justify-content: flex-start; // 替代原先的space-between布局方式
    flex-wrap: wrap;
  }
  
  .admin-item {  // 每个item
    flex: 1;
    width: calc((100% - 30rpx) / 4);  // 这里的30rpx = (分布个数4-1)*间隙10rpx, 可以根据实际的分布个数和间隙区调整
    min-width: calc((100% - 30rpx) / 4); // 加入这两个后每个item的宽度就生效了
    max-width: calc((100% - 30rpx) / 4); // 加入这两个后每个item的宽度就生效了
    &:nth-child(4n) { // 去除第4n个的margin-right
      margin-right: 0;
    }
    // width: $image;
    height: $image;
    margin: 10rpx 10rpx 0 0; // 间隙为10rpx
  }