解决flex布局space-between最后一行布局问题超简单方法

如果flex布局中justify-content设置为space-between、space-evenly或者space-around

并且最后一行与上面一行个数不同时，布局会裂开

 

 1个container父元素包裹了7个item子元素，1行想设置4个，最后一行的item不到4个，但想靠左

1.  
   <div class="container">
2.  
   <div class="item item1">1</div>
3.  
   <div class="item item1">2</div>
4.  
   <div class="item item1">3</div>
5.  
   <div class="item item1">4</div>
6.  
   <div class="item item1">5</div>
7.  
   <div class="item item1">6</div>
8.  
   <div class="item item1">7</div>
9.  
   </div>

1.  
   .container {
2.  
   width: 700px;
3.  
   background-color: orange;
4.  
   display: flex;
5.  
   flex-wrap: wrap; //换行
6.  
   justify-content: space-between;
7.  
   }
8.  
    
9.  
   .item {
10.  
    width: 150px;
11.  
    height: 150px;
12.  
    margin-bottom: 10px;
13.  
    background-color: green;
14.  
    }

如果一行想添加的子元素item为n个

那么在最后一行加入（n-2）个span，再给span添加宽度即可

1.  
   <div class="container">
2.  
   <div class="item item1">1</div>
3.  
   <div class="item item1">2</div>
4.  
   <div class="item item1">3</div>
5.  
   <div class="item item1">4</div>
6.  
   <div class="item item1">5</div>
7.  
   <div class="item item1">6</div>
8.  
   <div class="item item1">7</div>
9.  
   <span></span>
10.  
    <span></span>
11.  
    </div>

1.  
   .container {
2.  
   width: 700px;
3.  
   background-color: orange;
4.  
   display: flex;
5.  
   flex-wrap: wrap;
6.  
   justify-content: space-between
7.  
   }
8.  
    
9.  
   .item {
10.  
    width: 150px;
11.  
    height: 150px;
12.  
    margin-bottom: 10px;
13.  
    background-color: green;
14.  
    }
15.  
     
16.  
    .container span {
17.  
    width: 150px;
18.  
    }

为什么要设置n-2个span？

拿上面的例子来说，一行需要4个子元素。

• 只有1个元素的时候，会靠左排列。
• 有4个元素的时候，就不需要关心这个问题了。

所以去除掉这两种情况。

 justify-content:space-between在最后一行只有一个元素的时候，那个元素默认是靠左排布的；如果最后一行拥有与上面行相同的元素数量，最后一行的排布就与上面行的排布相同。上面两种情况不需要添加span元素，于是需要添加span的就剩下了n-2个。

在本文的例子中，最后一行如果是2个item，添加两个span刚好能够补充空位；如果是3个item的话，一个补充在最后一个空位上，另外一个补充在下一行，但是span是没有设置高度的，不会进行展示