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

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

方法一、如果子元素的宽度不固定（对于一些数据是后台传过来的，最后一行也不知道多少条数据）
因为宽度不固定不能根据宽度计算出margin的值
（1）最后一项margin-right：auto；

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

(2)

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

行数固定解决方法
固定2行，4列，但是只有7个div，需要排列成以上样子。

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

说明：
calc()是英文单词calculate(计算)的缩写，是css3的一个新增的功能，你可以使用calc()计算border、margin、pading、font-size和width等属性设置动态值。 以前我们可以使用box-sizing:border-box;来设置盒子的属性为不加上边距，现在我们又多了一个选择了。但要注意，两者只能使用一个哦，否则就会造成冲突了。
calc() 函数用于动态计算长度值。

需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
任何长度值都可以使用calc()函数进行计算；
calc()函数支持 “+”, “-”, “*”, “/” 运算；
calc()函数使用标准的数学运算优先级规则；
方法二 根据最后一行个数确定margin

由于每一列的数目都是固定的，因此，我们可以计算出不同个数列表应当多大的margin值才能保证完全左对齐。

例如，假设每行4个元素，结果最后一行只有3个元素，则最后一个元素的margin-right大小是“列表宽度+间隙大小”的话，那最后3个元素也是可以完美左对齐的。

然后，借助树结构伪类数量匹配技术（这篇文章“伪类匹配列表数目实现微信群头像CSS布局的技巧”中的布局技巧就是借助这种技术实现），我们可以知道最后一行有几个元素。

例如：

.list:last-child:nth-child(4n - 1)说明最后一行，要么3个元素，要么7个元素……
.list:last-child:nth-child(4n - 2)说明最后一行，要么2个元素，要么6个元素……

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