一行显示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
	}

 

如果对你有用，关注一下博主的小程序，登录一下给予支持，以后有什么开源好用的源码都会上传到小程序