flex 固定每行数量_flex 布局 平均分布又可以换行

效果图.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;

}

平面

平面

平面

平面

平面

平面

下面是多添加几个空白的

当你按照上面我弄的这样，就可以搞定了，重要：空白的高度一定要给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;

}

平面

平面

平面

平面

平面

平面