Flexbox中space-between结合wrap时，如何让最后一行子元素左对齐？

你遇到的这个情况确实是justify-content: space-between在换行布局里的典型痛点——当最后一行磁贴数量不足时，它们会被强制分散开，破坏了和上一行一致的左对齐视觉效果。好消息是只用Flex属性就能搞定这个问题，不需要额外加HTML元素或者JavaScript。

核心思路：用伪元素填充最后一行的空位 #

我们可以给容器.browser添加一个::after伪元素，让它的尺寸和磁贴.case完全一致。这个伪元素会“占据”最后一行的剩余位置，迫使前面的磁贴自动左对齐，同时完全不影响前面完整行的space-between两端对齐效果。

修改后的完整代码 #

HTML（无需改动）

<div class="browser">
 <div @click='projectClicked' class="case">
  <h3>Project</h3>
 </div>
 <div @click='projectClicked' class="case">
  <h3>Project</h3>
 </div>
 <div @click='projectClicked' class="case">
  <h3>Project</h3>
 </div>
 <div @click='projectClicked' class="case">
  <h3>Project</h3>
 </div>
 <div @click='projectClicked' class="case">
  <h3>Project</h3>
 </div>
</div>

CSS（关键修改部分）

.browser {
 width: 700px;
 display:flex;
 justify-content: space-between;
 padding-bottom:100px;
 flex-wrap:wrap;
 border:1px solid red;
}
/* 添加这个伪元素是核心解决方案 */
.browser::after {
  content: "";
  flex: 0 0 200px; /* 和.case的flex属性完全匹配 */
  height: 0; /* 不需要高度，避免占用额外垂直空间 */
  margin-bottom: 10px; /* 和磁贴保持一致的底部间距，可选但更严谨 */
}
.case {
 flex: 0 0 200px;
 background-color:#ccc;
 height:100px;
 border:1px solid blue;
 margin-bottom:10px;
}

原理说明 #

• 伪元素::after会被当作Flex容器的子元素，和磁贴一起参与布局计算。
• 在磁贴数量不满一行时，它会填充剩余的位置，让前面的磁贴自然左对齐；而在完整的行里，它会被挤到下一行，但因为height:0，不会影响整体的垂直布局。
• 如果你的磁贴是动态宽度（比如用百分比flex: 1 0 20%），只需要把伪元素的flex属性改成和磁贴一致的值即可，适配性极强。

内容的提问来源于stack exchange，提问作者Kokodoko