uniapp使用flex布局遇到的问题

uniapp使用flex布局遇到的问题

项目场景：

在开发uniapp小程序中使用flex布局

---

问题描述：

在使用flex布局过程中，应该实现如下效果：

但是使用flex布局：

<view class="spi-bottom ">
				<view class="spib-pic">
					<image src="" mode=""></image>
				</view>
				<view class="spib-pic">
					<image src="" mode=""></image>
				</view>
				<view class="spib-pic">
					<image src="" mode=""></image>
				</view>
				<view class="spib-pic">
					<image src="" mode=""></image>
				</view>
				<view class="spib-pic">
					<image src="" mode=""></image>
				</view>
			</view>
		</view>

.spib-pic{
	width: 200rpx;
	height: 120rpx;
	background-color: #f7f7f7;
	box-shadow: 0rpx 4rpx 4rpx 0rpx 
		rgba(0, 0, 0, 0.1);
	display: inline-block;
	margin-bottom: 30rpx;
}
.spib-pic2{
	width: 200rpx;
	background-color: #f7f7f7;
	box-shadow: 0rpx 4rpx 4rpx 0rpx 
		rgba(0, 0, 0, 0.1);
	display: inline-block;
	margin-bottom: 30rpx;
	visibility:hidden
}

这样结果如下：

解决办法

将下面添加（这行元素-1）个空div，只设置宽度，不设置高度

<view class="spi-bottom ">
				<view class="spib-pic">
					<image src="" mode=""></image>
				</view>
				<view class="spib-pic">
					<image src="" mode=""></image>
				</view>
				<view class="spib-pic">
					<image src="" mode=""></image>
				</view>
				<view class="spib-pic">
					<image src="" mode=""></image>
				</view>
				<view class="spib-pic">
					<image src="" mode=""></image>
				</view>
				<!-- 布局需要 -->
				<view class="spib-pic2"></view>
				<view class="spib-pic2"></view>
			</view>

.spi-bottom{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.spib-pic{
	width: 200rpx;
	height: 120rpx;
	background-color: #f7f7f7;
	box-shadow: 0rpx 4rpx 4rpx 0rpx 
		rgba(0, 0, 0, 0.1);
	display: inline-block;
	margin-bottom: 30rpx;
}
.spib-pic2{
	width: 200rpx;
	background-color: #f7f7f7;
	box-shadow: 0rpx 4rpx 4rpx 0rpx 
		rgba(0, 0, 0, 0.1);
	display: inline-block;
	margin-bottom: 30rpx;
	visibility:hidden
}

---

这就是我目前的解决方案，期待有更好的解决方案