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

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

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

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

用空的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来达到最后一行两端对齐

用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来达到需求效果

每一行的列数固定

因为每一行的列数固定，所以可以用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实现最后一列左对齐

因为每一行的列数固定，所以可以用最后一个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来实现最后一行左对齐

每一列的宽度不一样

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

最后一个单元格设置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

利用容器的伪元素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放大填满容器

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

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