flex布局最后一行列表左对齐的方法

最后一行列数不固定

1 .使用足够多的空白标签来填充占位
2 .如果一行最多有7个元素，那么添加6个空白的元素即可
3 .代码

列数不确定，html不能加元素

1 .Grid布局
2 .

每个子项宽度不确定

1 .最后一项margin-right:auto

.container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.list {
    background-color: skyblue;
    margin: 10px;
}
/* 最后一项margin-right:auto */
.list:last-child {
    margin-right: auto;
}

2 .创建伪元素并设置flex:auto或者flex:1

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

每一行列数是固定的

1 .根据个数最后一个元素动态margin

.list:last-child:nth-child(4n - 2) {
    margin-right: calc(48% + 8% / 3);
}