目的效果:
如何可以使用flex布局 进行平均分布,又可以换行呢?
我最开始是这样做的:
display: flex;
display: -webkit-flex;
justify-content: space-between;
flex-direction: row;
flex-wrap: wrap;
效果:
如果我多添加几个空白的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,如果你给了高度,就会出现如下问题:
效果: