前端页面中常用到flex布局，当justify-content的值设为space-around或者是space-between时，会存在这样一个问题：如果最后一行元素未占满一行，那么该行元素会均匀分布而不是左对齐。
image.png
此时想要最后一行的元素左对齐且垂直方向上列对齐，就必须使用一些方法，鉴于网上的方法多为针对三列或者四列，所以在此针对五列及其以上做一个总结（选择针对8列），希望对大家有帮助。先附上完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>8列情况</title>
<style>
*{
margin:0;
padding:0;
}
.box {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
margin:20px auto;
width: 636px;
border:1px solid red;
}
.box .list{
margin-bottom: 10px;
width: 12%;
height:30px;
background-color: green;
}
/*占位元素样式*/
.item{
width: 12%;
overflow: hidden;
}
</style>
</head>
<body>
<div class="box">
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
image.png
