css:解決flex布局space-between最后一行左對齊的方法


首先看代碼和效果

.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;
}

  

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM