如何解決flex多列布局遇到的問題

這篇文章主要介紹如何解決flex多列布局遇到的問題，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)公司主要從事網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)阿巴嘎,十載網(wǎng)站建設(shè)經(jīng)驗(yàn),價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):028-86922220

flex布局無疑是簡單、易用的，他讓我我們的布局更加簡單和快速，但是在使用flex進(jìn)行多列布局的時候，我相信很多人會遇到下面的情況：

這種情況是因?yàn)槲覀兪褂昧薺ustify-content: space-between;為什么使用這個設(shè)置，是因?yàn)槲覀儾挥萌ｉT計(jì)算元素之間的間距，flex會幫我們計(jì)算好，但是正是因?yàn)檫@樣，當(dāng)我們隨后一行元素，不足時，就會出現(xiàn)上面的這種情況，那么問題清楚了，是因?yàn)樽詈笠恍性夭蛔阍斐傻模俏覀兛梢哉J(rèn)為的給最后一行加上一個空元素，用來占位，就可以完美解決上面的問題：

這里我們使用偽元素，來實(shí)現(xiàn)占位，注意偽元素只用設(shè)置寬度，千萬別設(shè)置高度。具體如下：

.container::after{
      content: '';
      width:320px;
    }

效果如下：

但是我們會發(fā)現(xiàn)，顯示開發(fā)中，我們不僅會遇到三列布局，四列五列等等也是很常見的，那么這個時候顯然上面的做法就不行了，那么怎么解決呢，方案也很簡單，原理都是一樣的，利用空元素占位，這次我們不使用偽元素，我們使用真正的dom元素，來進(jìn)行操作：

預(yù)先寫好一行空元素：如下

<div class="container">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">2</div>
    <div class="box">2</div>
    <div class="box">2</div>
    <div class="box">2</div>
    <div class="box">2</div>
    <div class="box">2</div>
    <div class="box">2</div>
    <div class="box">2</div>
    <!-- 分割線（下面就是我預(yù)先寫好的空元素） -->
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>

對應(yīng)的css設(shè)置：

div:empty{
      height: 0;
      width:160px;
      border:none;
    }

效果如下：

這個時候我們就會發(fā)現(xiàn)無論是多少列，都可以完美的解決我們最初的問題

以上是“如何解決flex多列布局遇到的問題”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享文章：如何解決flex多列布局遇到的問題
文章源于：http://bm7419.com/article24/pceece.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營銷型網(wǎng)站建設(shè)、電子商務(wù)、企業(yè)網(wǎng)站制作、云服務(wù)器、App開發(fā)、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)