直接加 justify-content: flex-start 无法实现最后一行视觉左对齐，因其仅控制每行内部对齐，不消除末行右侧空白；真正有效的是用 ::after 伪元素占位，需同时满足 display: block、flex: 0 0 100%、content: ""，且响应式下须与子项 flex-basis 同步重置，否则在 safari 等环境下失效。
直接加 justify-content: flex-start 不能让最后一行“看起来整齐”——它确实让项目从左开始排，但右侧空白还在，视觉上依然错位。
为什么 justify-content 对最后一行“没反应”
不是写错了，是 Flex 的计算逻辑决定的：flex-wrap: wrap 启用后，浏览器为每一行单独分配主轴剩余空间。最后一行若不满，justify-content 只控制该行内部对齐，不改变它在容器中的横向位置；右侧空隙仍存在，尤其当子项带 margin-right 或用了 gap 时更明显。
常见现象包括：
- 卡片列表小屏下末行只显示 2 张，却悬浮在容器中间
- 加了
justify-content: space-between后，末行首尾贴边、间距崩坏 - 子项用了
flex-grow: 1，整行被撑满，反而失去左贴边效果
::after 伪元素补位必须满足的硬性条件
纯 CSS 补位最易失效，就卡在这两条上：
-
flex: 0 0 100%——必须明确禁止缩放与增长，否则 iOS Safari 15–16、部分安卓 WebView 会忽略宽度或拉伸变形 -
display: block（或display: flex）——不加这个，flex-basis和width在某些渲染引擎中根本不起作用
别用 height: 0; overflow: hidden 替代 display: block，它只隐藏内容，不参与 flex 行布局计算；也别设 visibility: hidden 或 opacity: 0，这会影响 flex 项计数和空间分配。
响应式下伪元素宽度必须和子项同步重置
子项用 flex: 0 0 calc(25% - 12px)（4 列），伪元素就得在对应媒体查询里设 flex-basis: calc(25% - 12px)；子项用 width: 20%; margin-right: 10px，伪元素就要 flex-basis: calc(20% + 10px)（注意是加，不是减）。
常见错误是媒体查询里漏掉伪元素重置：小屏下它还按大屏的 flex-basis 占位，导致最后一行多出一整列空白。
如果子项宽度不固定（比如含 flex-grow、minmax()、或 JS 动态改宽），伪元素方案会彻底失效——它无法感知真实换行位置，此时必须切到 JS 补空节点，或换用 Grid。
比伪元素更稳的替代路径：display: grid
用 display: grid 配合 grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) 和 justify-content: start，所有行天然左对齐，无需补位、无 margin 抵消陷阱。
唯一需要留意的是：Grid 的响应式断点靠 minmax() 内部调节，不像 Flex 的 flex-basis 那样容易做逐级降级；另外，justify-items 控制单个格子对齐，justify-content 才控制整行对齐方向——这点容易混淆。
真正麻烦的从来不是“怎么写”，而是“什么时候该放弃 Flex”。当子项宽度动态、总数不确定、或需要跨行对齐时，硬套伪元素只会让 CSS 越来越难维护。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
