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

每个子项宽度不确定

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

//每一行都有四列，宽度确定为24% 则剩余总计4%的宽度 最后一行四列的话有3个间隙
//每个间隙为4%/3
.list{
	margin-right: calc(4% / 3)
}
//第二列  右边有两个间隙
.list:last-child:nth-child(4n - 2) {
    margin-right: calc(48% + (4% * 2 / 3));
}
//第三列 右边有一个间隙
.list:last-child:nth-child(4n - 1) {
    margin-right: calc(72% + 4% / 3);
}

grid可以解决列数不固定的情况

    justify-content: space-between;
    display: grid;
    grid-template-columns: repeat(auto-fill, 256px);
    grid-gap: 16px;