css flex布局列表最后一行左对齐的几种方式

在开发需求的过程中，会碰到一种需求，是一种列表，两端对齐，但是列表的最后一行要左对齐

列数不固定，每列的宽度固定

列表的宽度是自适应的，所以列数一般也不固定，或者列表的数量不固定，导致列数也不固定，这种情况如果要满足要需求，可以有两种方法

1. 用空的html标签填充进去，来满足最后一行也填满最后一列(列数固定也可以满足需求)

   .box{
     border:1px solid #000;
     width:750px;
     margin:0 auto;
     margin-top:10px;
     color:white;
     font-size:30px;
   }
   .listBox{
     display:flex;
     flex-wrap:wrap;
     justify-content:space-between;
     margin-right:-10px;
     margin-top:-10px;
   }
   .listBox div{
     background:red;
     width:100px;
     height:100px;
     margin-top:10px;
     margin-right:10px;
   }
   .listBox span{
     width:100px;
     margin-right:10px;
   }
   

   <div class="box">
     <div class="listBox">
       <div class="div1">1</div>
       <div class="div2">2</div>
       <div class="div3">3</div>
       <div class="div4">4</div>
       <div class="div5">5</div>
       <div class="div6">6</div>
       <div class="div7">7</div>
       <div class="div8">8</div>
       <div class="div9">9</div>
       <div class="div10">10</div>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
     </div>
   </div>
   

   假如列表最后一行最多缺少4列，html就添加4个span标签，让空的span标签来填充最后一行，并且css设置和div一样，但是不设置高度，这样就不占高度的空间，来达到效果，如图所示
   

   填充html来达到最后一行两端对齐

2. 用grid布局，因为grid有天然的左对齐的功能和设置列自动填满空间的auto-fill属性，并且可以设置间距

   .box{
     border:1px solid #000;
     width:750px;
     margin:0 auto;
     margin-top:10px;
     color:white;
     font-size:30px;
   }
   
   .listBox{
     display:grid;
     grid-template-columns:repeat(auto-fill,100px);
     grid-gap:10px;
     justify-content:space-between;
   }
   .listBox div{
     background:red;
     width:100px;
     height:100px;
   }
   

   <div class="box">
     <div class="listBox">
       <div class="div1">1</div>
       <div class="div2">2</div>
       <div class="div3">3</div>
       <div class="div4">4</div>
       <div class="div5">5</div>
       <div class="div6">6</div>
       <div class="div7">7</div>
       <div class="div8">8</div>
       <div class="div9">9</div>
       <div class="div10">10</div>
     </div>
   </div>
   

   利用grid的repeat属性auto-fill来自动填充到容器的最右侧，并且换行，还左对齐，如果所示
   

   设置grid来达到需求效果

每一行的列数固定

1. 因为每一行的列数固定，所以可以用margin来代替justify-content实现单元格的间隙

   .box{
     border:1px solid #000;
     width:700px;
     margin:0 auto;
     margin-top:10px;
     color:white;
     font-size:30px;
   }
   
   .listBox{
     display:flex;
     flex-wrap:wrap;
     margin-top:-10px;
   }
   .listBox div{
     background:red;
     width:24%;
     height:100px;
     margin-top:10px;
   }
   .listBox div:not(:nth-child(4n)){
     margin-right:calc(4% / 3);/* 不设置最后一列的margin-right */
   }
   

   如果所示，

   
   margin代替justify-content实现最后一列左对齐

2. 因为每一行的列数固定，所以可以用最后一个item的margin-right来控制最后一行左对齐

   .box{
     border:1px solid #000;
     width:700px;
     margin:0 auto;
     margin-top:10px;
     color:white;
     font-size:30px;
   }
   
   .listBox{
     display:flex;
     flex-wrap:wrap;
     margin-top:-10px;
     justify-content:space-between;
   }
   .listBox div{
     background:red;
     width:24%;
     height:100px;
     margin-top:10px;
   }
   .listBox div:last-child:nth-child(4n-2){
     margin-right:calc(48% + 4% / 3 * 2);/* 最后一行有两个元素的情况*/
   }
   /*
   .listBox div:last-child:nth-child(4n-1){
     margin-right:calc(24% + 4% / 3); 最后一行有两个元素的情况
   } */
   

   .listBox div:last-child:nth-child(4n-2)最后一行有两个元素的情况
   .listBox div:last-child:nth-child(4n-1)最后一行有三个元素的情况
   

   利用justify-content和最后一个单元格的margin来实现最后一行左对齐

每一列的宽度不一样

因为需要两端对齐，并且每一列的宽度不一样，所以导致每一行的列与列的间距是不一样的

1. 最后一个单元格设置margin-right:auto,使最后一行左对齐

   .box{
     border:1px solid #000;
     width:700px;
     margin:0 auto;
     margin-top:10px;
     color:white;
     font-size:30px;
   }
   
   .listBox{
     display:flex;
     flex-wrap:wrap;
     margin-top:-10px;
     justify-content:space-between;
   }
   .listBox div{
     background:red;
     height:100px;
     margin-top:10px;
     margin-right:10px;
   }
   .listBox div:last-child{
     margin-right:auto;
   }
   .div1{
     width:100px;
   }
   .div2{
     width:50px;
   }
   .div3{
     width:70px;
   }
   .div4{
     width:120px;
   }
   .div5{
     width:20px;
   }
   .div6{
     width:40px;
   }
   .div7{
     width:80px;
   }
   .div8{
     width:180px;
   }
   .div9{
     width:60px;
   }
   .div10{
     width:90px;
   }
   

   如果所示，效果如下

   
   最后一个单元格设置margin-right:auto

2. 利用容器的伪元素after，然后放大填满容器，使最后一行左对齐

   .box{
     border:1px solid #000;
     width:700px;
     margin:0 auto;
     margin-top:10px;
     color:white;
     font-size:30px;
   }
   
   .listBox{
     display:flex;
     flex-wrap:wrap;
     margin-top:-10px;
     justify-content:space-between;
   }
   .listBox div{
     background:red;
     height:100px;
     margin-top:10px;
     margin-right:10px;
   }
   .listBox::after{
     content:"";
     flex:1;/* 或者flex:auto,只要设置flex-grow的值大于0的正整数就可以 */
   }
   

   利用容器的伪元素after放大填满容器

这种需求很常见，所以总结记录一下。