效果图.png
如何可以使用flex布局 进行平均分布，又可以换行呢？
我最开始是这样做的
display: flex;
display: -webkit-flex;
justify-content: space-between;
flex-direction: row;
flex-wrap: wrap;
但是你会发现效果不对劲
错误.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>
当你按照上面我弄的这样，就可以搞定了，重要：空白的高度一定要给0px，如果你给了高度，就会出现如下问题
错误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>
网友评论