flex多个item同行排列，超出换行左对齐

关于排列布局，在网上找了许多方法，感觉都差了那么一点，故自己花时间弄了一个

实例以VUE展示

 

 

<view class="itemBox">
    <view class="item" v-for="(item, index) in list" :key="index" :class="{item_c: index==idx}">
        <image :src="img" mode="widthFix" class="warp"></image>
    </view>
</view>

 

.itemBox{
　　margin: 0 15rpx;
　　display: flex;
　　flex-direction: row;
　　flex-wrap: wrap;
　　background-color: red;
　　.item{
　　　　width: 180rpx;
　　　　display: flex;
　　　　justify-content: center;
　　　　align-items: center;
　　　　.warp{
　　　　　　width: 160rpx;
　　　　　　display: flex;
　　　　　　justify-content: center;
　　　　　　align-items: center;
　　　　　　margin: 10rpx 0;
　　　　}
　　}
　　.item_c{
　　　　width: 180rpx;
　　　　display: flex;
　　　　justify-content: center;
　　　　align-items: center;
　　　　background-color: cyan;
　　}
}
.itemBox::after{
　　content:'';
　　flex: auto

}

实际效果