【1】需求：
【2】解決方案：
最近遇到布局上要求item兩端對齊，且最后一行在列不滿的情況下要求左對齊，使用flex的justify-content: space-between;
實現時發現最后一行不能左對齊，而是兩端對齊方式。
不是項目上想要的效果
# 網上查了一些資料，有兩種方法可以實現效果：
**1.添加幾個空item**（對我來說最有效的，適用於大多數場景）
根據布局列數添加空item，比如每行最大n列，那么在最后添加n-2個空item即可
<html> <style> .box { display: flex; flex-wrap: wrap; justify-content: space-between; } .item { width: 30%; height: 50px; background-color: #f1f8ff; margin-bottom: 10px; } .placeholder { width: 30%; height: 0px; } </style> <body> <div class="box"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="placeholder"></div> </div> </body> </html>
實現效果
**2.利於after或者before（適用於每行3或者4列）**
.box:after { display:block; content:""; width: 30%; height:0px; }
.