首先看代碼和效果
.itemTypeCont{ display: flex; justify-content: space-between; flex-wrap: wrap; } .itemTypeCont>view{ width: 200rpx; border: 1px solid green; text-align: center; margin-top: 20rpx; font-size: 30rpx; }
<view class="itemTypeCont"> <view>不限</view> <view>電子商務</view> <view>電子商務</view> <view>不限</view> <view>電子商務</view> <view>電子商務</view> <view>不限</view> <view>電子商務</view> <view>電子商務</view> <view>電子商務</view> <view>電子商務</view> </view>
可以看到最后一個div並沒有在中間,而是在最后了
因為我們設置了justify-content為space-between,意思就是兩邊貼邊
這時候我們可以給最外層div設置個偽元素,寬度和里面的div寬度一樣就好了
只需要兩行css就可以
.itemTypeCont:after { content: ""; width: 200rpx; }