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

}

實際效果