flex弹性布局最后一行不对齐的处理

问题

属性值space-between可以实现两端对齐，最后一行个数不足以填满一行，出现没有完全垂直对齐的问题

.container{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.container .list{
    width: 24%;
    height: 100px;
    background-color: #2a80eb;
    margin-top: 15px;
}

解决方案：

一，每一行列数固定

1，模拟space-between属性值和间隙大小，使用margin对最后一行内容中出现的间隙进行控制

.container{
   display: flex;
    flex-wrap: wrap;
}
.container .list{
    width: 24%;
    height: 100px;
    background-color: #2a80eb;
    margin-top: 15px;
}
.container .list:not(:nth-child(4n)) {
    margin-right: calc(4% / 3);
}

2，根据元素个数给最后一个元素动态设置margin值

.container{
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
}
.container .list{
   width: 24%;
   height: 100px;
   background-color: #2a80eb;
   margin-top: 15px;
}
.container .list:last-child:nth-child(4n - 1) {
   margin-right: calc(24% + 4% / 3);
}
.container .list:last-child:nth-child(4n - 2) {
   margin-right: calc(48% + 8% / 3);
}

二、flex子项宽度不固定，实现两端对齐的效果

1，给最后一项设置margin-right:auto

<div class="container">
    <div class="list"></div>
    <div class="list"></div>
    <div class="list" style="width: 12%"></div>
    <div class="list" style="width: 12%"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list" style="width: 22%"></div>
    <div class="list" style="width: 18%"></div>
    <div class="list"></div>
    <div class="list"></div>
</div>
.container{
   display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.container .list{
    background-color: #2a80eb;
    margin: 10px;
    height: 100px;
}
.container .list:nth-child(4n) {
    width: 10%;
}
.container .list:nth-child(4n - 1) {
    width: 15%;
}
.container .list:nth-child(4n - 2) {
    width: 22%;
}
.container .list:nth-child(4n - 3) {
    width: 25%;
}
.container .list:last-child{
    margin-right: auto;
}

2，使用伪元素在列表的末尾创建一个flex子项，并设置flex:auto或设置flex:1

.container{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.container .list{
    background-color: #2a80eb;
    margin: 10px;
    height: 100px;
}
.container .list:nth-child(4n) {
    width: 10%;
}
.container .list:nth-child(4n - 1) {
    width: 15%;
}
.container .list:nth-child(4n - 2) {
    width: 22%;
}
.container .list:nth-child(4n - 3) {
    width: 25%;
}
.container::after{
    content: '';
    flex: auto;
}

三、每一行列数不固定

1，使用足够的空白标签进行填充占位，具体的占位数量是由最多列数的个数决定的。例如布局最多有7列，那我们可以使用7个空白标签进行填充占位；布局最多10列，那我们需要使用10个空白标签进行填充占位

<div class="container">
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
</div>
.container{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-right: -10px;
}
.container .list{
    width: 100px;
    height: 100px;
    background-color: #2a80eb;
    margin: 15px 10px 0 0;
}
.container > i{
    width: 100px;
    margin-right: 10px;
}

2，使用网格布局（grid布局）

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