flex 布局平均分布又可以换行

作者: 一个冬季 | 来源:发表于2018-07-25 15:02 被阅读4091次

flex 平均分布换行对齐文件管理器宫格布局
flex 布局平均分布又可以换行
flex布局平均分布又可以换行
CSS/javaScript 学习记录
flex平均分布并换行
flex布局，看完这篇都懂了
微信小程序小知识
flex详解
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;
        }

 <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>