效果圖.png
如何可以使用flex布局 進(jìn)行平均分布，又可以換行呢？
我最開始是這樣做的
display: flex;
display: -webkit-flex;
justify-content: space-between;
flex-direction: row;
flex-wrap: wrap;
但是你會發(fā)現(xiàn)效果不對勁
錯誤.png
后面覺得，如果我多添加幾個空白的html是不是就搞定了？
.bt_classify_name_empty{
margin: 5px;
width: 20%;
height: 0px;
}
<div id="dv_classify" class="classify">
<button class="bt_classify_name">
平面
</button>
<button class="bt_classify_name">
平面
</button>
<button class="bt_classify_name">
平面
</button>
<button class="bt_classify_name">
平面
</button>
<button class="bt_classify_name">
平面
</button>
<button class="bt_classify_name">
平面
</button>
下面是多添加幾個空白的
<button class="bt_classify_name_empty" style="visibility: hidden">
</button>
<button class="bt_classify_name_empty" style="visibility: hidden">
</button>
<button class="bt_classify_name_empty" style="visibility: hidden">
</button>
<button class="bt_classify_name_empty" style="visibility: hidden">
</button>
</div>
當(dāng)你按照上面我弄的這樣，就可以搞定了，重要：空白的高度一定要給0px，如果你給了高度，就會出現(xiàn)如下問題
錯誤2.png
會多出2個空白的高度，所以高度要給0px
全部代碼：
#container {
display: flex;
display: -webkit-flex;
flex-direction: column;
}
.fengexian {
margin-top: 50px;
background: #F6F6F6;
width: 100%;
height: 2px;
}
/**類別**/
.classify {
width: 100%;
height: auto;
display: flex;
display: -webkit-flex;
justify-content: space-between;
flex-direction: row;
flex-wrap: wrap;
}
.bt_classify_name {
margin: 5px;
width: 20%;
height: 30px;
border-radius: 8px;
background: #EDEDED;
}
.bt_classify_name_empty{
margin: 5px;
width: 20%;
height: 0px;
}
.bg_color_CB0165 {
background: #CB0165;
}
<body>
<div id="container">
<!--分類，類別-->
<div>
<div id="dv_classify" class="classify">
<button class="bt_classify_name">
平面
</button>
<button class="bt_classify_name">
平面
</button>
<button class="bt_classify_name">
平面
</button>
<button class="bt_classify_name">
平面
</button>
<button class="bt_classify_name">
平面
</button>
<button class="bt_classify_name">
平面
</button>
<button class="bt_classify_name_empty" style="visibility: hidden">
</button>
<button class="bt_classify_name_empty" style="visibility: hidden">
</button>
<button class="bt_classify_name_empty" style="visibility: hidden">
</button>
<button class="bt_classify_name_empty" style="visibility: hidden">
</button>
</div>
</div>
<div class="fengexian"></div>
</div>
</body>
