flex布局坑点之一（让CSS flex布局最后一行列表左对齐的N种方法）前言在CSS flex布局中，jus

前言

在CSS flex布局中，justify-content属性可以控制列表的水平对齐方式，例如space-between值可以实现两端对齐。但是，如果最后一行的列表的个数不满，则就会出现最后一行没有完全垂直对齐的问题。

<div class="container">
    <div class="list"> </div>
    <div class="list"> </div>    
    <div class="list"> </div>
</div>

.container 
display: flex 
justify-content: space-between 
flex-direction: row 
flex-wrap: wrap 
display: -webkit-flex 
    .list

解决方法

每一行的列数是固定的

不使用justify-content: space-between,使用margin-right来间隔开
根据个数最后一个元素动态margin

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

每一行列数不固定的情况下一篇文章补上～