让CSS flex布局最后一行列表左对齐的N种方法

一、问题描述

在flex布局中，justify-content：space-between可以实现列表的水平对齐方式为两端对齐。

但是，如果最后一行的列表的个数不够，则就会出现最后一行没有完全垂直对齐的问题。

如下代码：

    .list {
       margin: 50px auto;
       width: 400px;
       display: flex;
       justify-content: space-between;
       flex-wrap: wrap;
    }
    .item {
       width: 24%;
       height: 100px;
       background-color: skyblue;
       margin-top: 15px;
    }
    <div class="list">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div> 

此时，效果是这样的

二、如果每一行列数是固定的

如果每一行列数是固定的，则可用以下两种方法实现最后一行左对齐。

方法一：利用margin-rigtht模拟space-between和间隙

不使用justify-content:space-between，中间的间隙使用margin进行控制。

.list {
  margin: 50px auto;
  width: 400px;
  display: flex;
  flex-wrap: wrap;
}
.item {
   width: 24%;
   height: 100px;
   background-color: skyblue;
   margin-top: 15px;
}
.item:not(:nth-child(4n)) {
  margin-right: calc(4% / 3);
}

方法二：根据元素个数动态控制最后一个元素的margin值

由于每一列的数目都是固定的，因此，我们可以根据不同个数计算出最后一个元素的margin值来保证完全左对齐。

假设每行4个元素，如果最后一行有3个元素，则最后一个元素的margin-right是“列表宽度+间隙大小”。

假设每行4个元素，如果最后一行有2个元素，则最后一个元素的margin-right是“列表宽度X2 + 间隙大小X2”。

在本例中，一行有4个元素，因此，我们可以有如下CSS设置：

.list {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
}
.item {
  width: 24%;
  height: 100px;
  background-color: skyblue;
  margin-top: 15px;
}
/* 如果最后一行是3个元素 */
.item:last-child:nth-child(4n - 1) {
   margin-right: calc(24% + 4% / 3);
}
/* 如果最后一行是2个元素 */
.item:last-child:nth-child(4n - 2) {
  margin-right: calc(24% * 2 + (4% * 2) / 3);
}

三、如果每一子项宽度不固定

若每一个flex子项的宽度都不固定，此时间隙的大小不固定，对齐不严格，因此，我们可以直接让最后一行左对齐即可。具体方法有两个：

方法一：最后一项margin-right:auto

方法二：创建伪元素并设置flex:auto或flex:1

CSS代码如下：

.list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.item {
    background-color: skyblue;
    margin: 10px;
}
/* 最后一项margin-right:auto */
.item:last-child {
    margin-right: auto;
}
/* 使用伪元素辅助左对齐 */
.list::after {
    content: '';
    flex: auto;    /* 或者flex: 1 */
}

四、如果每一行列数不固定

如果每一行的列数不固定，则上面的这些方法均不适用，需要使用其他技巧来实现最后一行左对齐。

使用足够的空白标签进行填充占位，具体的占位数量是由最多列数的个数决定的，若最多7列，则可使用7个空白标签进行填充占位，最多10列，则需要使用10个空白标签。

实现的关键就是占位的<i>元素的宽度和margin大小设置得和.item列表元素一样。

<div class="list">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <i></i><i></i><i></i><i></i><i></i><i></i><i></i>
</div>

.list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.item {
  width: 100px;
  height: 100px;
  background-color: skyblue;
  margin: 15px 10px 0 0;
}
.list i{
  width: 100px;
  margin-right: 10px;
}

五、如果列数不固定HTML又不能调整

1、使用Grid布局

Grid布局天然有gap间隙，且天然格子对齐排布，因此，实现最后一行左对齐可以认为是天生的效果。

CSS代码如下：

.list {
    display: grid;
    justify-content: space-between;
    grid-template-columns: repeat(auto-fill, 100px);
    grid-gap: 10px;
}
.item {
    width: 100px; 
    height:100px;
    background-color: skyblue;
    margin-top: 5px;
}

2、使用table布局

.list {
    display: table;
}
.item {
    width: 100px; 
    height:100px;
    background-color: skyblue;
    margin: 10px;
    display: inline-block;
}