flex平均分布换行后自动对齐

傷城~ 2022-11-10 03:57 397阅读 0赞

**目的效果：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70]

如何可以使用flex布局 进行平均分布，又可以换行呢？  
我最开始是这样做的：

display: flex;
       display: -webkit-flex;
       justify-content: space-between;
       flex-direction: row;
       flex-wrap: wrap;

**效果：**  
![在这里插入图片描述][20210316113256272.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，如果你给了高度，就会出现如下问题：

**效果：**  
![在这里插入图片描述][20210316113634573.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70]: /images/20221023/7afdb5902d8a4db8aaae04f24d678697.png
[20210316113256272.png]: /images/20221023/c21e83ae5570424c8f87b23a37b4f095.png
[20210316113634573.png]: /images/20221023/999b9a2025764296a04624b13758919b.png