flex布局坑点之一（让CSS flex布局最后一行列表左对齐的N种方法）
前言
在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个元素……
每一行列数不固定的情况下一篇文章补上～
作者：angelanana
链接：https://juejin.cn/post/7031090911694028830