flex布局無疑是簡單、易用的，他讓我我們的布局更加簡單和快速，但是在使用flex進行多列布局的時候，我相信很多人會遇到下面的情況：
這種情況是因為我們使用了justify-content: space-between;為什么使用這個設置，是因為我們不用去專門計算元素之間的間距，flex會幫我們計算好，但是正是因為這樣，當我們隨后一行元素，不足時，就會出現上面的這種情況，那么問題清楚了，是因為最后一行元素不足造成的，那我們可以認為的給最后一行加上一個空元素，用來占位，就可以完美解決上面的問題：
這里我們使用偽元素，來實現占位，注意偽元素只用設置寬度，千萬別設置高度。具體如下：
.container::after{ content: ''; width:320px; }效果如下：
但是我們會發現，顯示開發中，我們不僅會遇到三列布局，四列五列等等也是很常見的，那么這個時候顯然上面的做法就不行了，那么怎么解決呢，方案也很簡單，原理都是一樣的，利用空元素占位，這次我們不使用偽元素，我們使用真正的dom元素，來進行操作：
預先寫好一行空元素：如下
<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> <!-- 分割線（下面就是我預先寫好的空元素） --> <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>
對應的css設置：
div:empty{ height: 0; width:160px; border:none; }效果如下：
這個時候我們就會發現無論是多少列，都可以完美的解決我們最初的問題
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
