效果
![在这里插入图片描述 在这里插入图片描述](https://ucc.alicdn.com/images/user-upload-01/2020112619273267.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Mxb2Fr,size_16,color_FFFFFF,t_70#pic_center&x-oss-process=image/resize,w_1400/format,webp)
代码
<!--页面代码-->
<view class="container">
<view class="label">
水产养殖
</view>
<view class="label">
护理
</view>
<view class="label">
冬季水产养殖
</view>
<view class="label">
冬季
</view>
......
</view>
/* 样式代码 */
.container{
display:flex;
flex-wrap: wrap;
padding:0 30rpx;
}
.label {
height: 60rpx;
border-radius: 30rpx;
background: #F5F5F5;
line-height: 60rpx;
text-align: center;
padding: 0 40rpx;
margin-top: 25rpx;
flex-grow: 1;
margin-right: 24rpx;
}
/* 让最后一行填充满 */
.container::after {
content: '';
flex-grow: 99;
}
参考
Css3实现百度图片的横向瀑布流布局