flex布局中最后一行左对齐方案

前端页面中常用到flex布局，当justify-content的值设为space-around或者是space-between时，会存在这样一个问题：如果最后一行元素未占满一行，那么该行元素会均匀分布而不是左对齐。

效果如下：

image.png

此时想要最后一行的元素左对齐且垂直方向上列对齐，就必须使用一些方法，鉴于网上的方法多为针对三列或者四列，所以在此针对五列及其以上做一个总结（选择针对8列），希望对大家有帮助。先附上完整代码：

效果图如图所示：

image.png

由此可以看出，该方法是通过增加占位元素来实现的，当布局一行元素为n列的时候，需要搭配n-1个占位元素来达到目的，但是要注意元素宽度的计算，使用百分比的话，是用1除以列数n，然后取整得到的，占位元素宽度和元素的宽度都是这个值。