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

如果每一行列数不固定

原文章：让CSS flex布局最后一行列表左对齐的N种方法_HD243608836的博客-CSDN博客

如果每一行的列数不固定，则上面文章中的其它方法均不适用，只能使用其中的这一个技巧来实现最后一行左对齐。

这个方法其实很简单，也很好理解，就是使用足够的空白标签进行填充占位，具体的占位数量是由最多列数的个数决定的。
（这个建议使用JavaScript来for循环标签的个数，循环的len为当前分页中数据项的个数-1）。

例如：

这个布局最多7列，那我们可以使用7个空白标签进行填充占位，最多10列，那我们需要使用10个空白标签 

css样式 

.container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    flex-direction: row; 
}

.list {
	width:100px;
    height:100px;
    background-color: skyblue;
    margin-top: 15px;
}

/* 和列表一样的宽度和margin值 */
.container > i {
    width: 100px;
}

html标签

  
1
  
1
  
1
  
1
  
1
  
1
  
1
  
1
  
  

对于标签的JavaScript的for循环这里就不写了，现在vue或者小程序编程都带有v-for或者wx:for，参数为{{list}}，都可以做到这种效果。

当然如果懒得话，可以直接写10或20个标签哈哈！！！