justify-content: flex-start 并非失效，而是仅控制每行项目整体左起始位置，不消除末行右侧空白；真正解决需用 ::after 伪元素占位（flex: 0 0 100% + display: block）或改用 grid 的 justify-content: start。
直接加 justify-content: flex-start 不能让最后一行视觉左对齐——它只是让每行从左开始排，但不解决末行右侧大片空白的问题。
为什么 justify-content: flex-start 看起来“没用”
这不是写错了，是 Flex 的行为机制：启用 flex-wrap: wrap 后，浏览器为每一行单独计算主轴剩余空间。最后一行若不满，flex-start 只保证项目从左缘起始，但右侧空隙仍存在，尤其当子项用了 margin-right 或 gap 时更明显。
常见错误现象：
- 卡片列表在小屏下末行只显示 2 张，却悬浮在中间
- 加了
justify-content: space-between后末行间距崩坏 - 用
flex-grow: 1的子项导致整行被撑满，失去左贴边效果
::after 伪元素必须设 flex: 0 0 100% + display: block
这是最易失效的点：只写 content: "" 和 width: 100% 在 iOS Safari 15–16、部分安卓 WebView 中完全不换行，甚至被拉伸变形。
正确做法：
-
flex: 0 0 100%明确禁止缩放与增长，宽度严格等于容器内容区宽度 - 必须加
display: block（或display: flex），否则某些渲染引擎会忽略flex-basis或width - 不要用
height: 0; overflow: hidden替代——它只隐藏内容，不参与换行逻辑 - 绝对不要设
visibility: hidden或opacity: 0，它们仍参与 flex 计数和空间分配
响应式下伪元素的 flex-basis 必须和子项同步重置
子项在不同断点用 flex-basis: calc(25% - 8px)（4 列），伪元素就得在对应 @media 里也写一模一样的值；子项用 width: 20%; margin-right: 10px，伪元素就要 flex-basis: calc(20% + 10px)（注意是加，不是减）。
常见坑：
- 媒体查询漏掉伪元素重置，小屏下它还按大屏的
flex-basis占位，末行多出一整列空白 - 子项宽度不固定（比如含
flex-grow、minmax()、JS 动态改宽），伪元素方案彻底失效——它无法感知真实换行位置 - 用
gap代替margin时，伪元素无需模拟间隙，但flex-basis仍需匹配子项内容宽度（不含 gap）
什么时候该放弃伪元素，换用其他方案
伪元素补位轻量、无 JS 依赖，但有硬性前提：列数可预知、子项宽度固定、响应式断点可控。
以下情况建议切换：
- 子项宽度动态变化（如文字长度影响盒尺寸、图片加载后重排），优先用 JS 动态插入空
<div> 节点<li>需要兼容老版 Safari（<code>::after在 flex 容器中行为不稳定），改用margin-right: auto加:last-child（仅限列数固定场景） - 项目已用 Grid 布局或可重构，直接上
display: grid; justify-content: start; grid-auto-flow: dense，天然支持末行左对齐，无占位、无断点重算压力
真正难的不是写出那几行 CSS，而是判断当前布局是否满足伪元素补位的前提条件——宽度、断点、子项行为，三者缺一不可。
