justify-content: flex-start 最省事但仅适用于纯左对齐；space-between 配伪元素最通用；grid 方案最干净但 ie 不支持。
直接说结论：justify-content: flex-start 最省事但只适用于纯左对齐；space-between + 伪元素占位最通用；Grid 替代方案最干净，但 IE 不支持。
justify-content: flex-start 能不能直接用
能，但仅限于你不需要两端对齐、也不需要每行等间距的场景。它让所有行都从左侧开始排列，自然就不存在“最后一行右留白”的问题。
- 适用场景：
display: flex+flex-wrap: wrap+ 所有子项宽度固定（如width: 200px） - 不适用场景：用了
justify-content: space-between或space-around后又想保留间隙感，这时设flex-start会直接丢掉间隙 - 常见错误：以为加了
flex-start就能“修复” space-between 的最后一行问题——其实两者互斥，浏览器只会按后者生效
伪元素 ::after 占位为什么必须配合 space-between
因为 ::after 的作用不是“对齐最后一行”，而是“吃掉右侧空白”，让 space-between 认为这一行“满了”，从而把剩余元素均匀分隔开——而视觉上，由于占位符不可见，就等效于左对齐。
- 关键写法：
.container::after { content: ""; flex: 999; min-width: 0; } - 必须加
min-width: 0：Safari 下不加会导致伪元素不收缩，强行换行或撑宽容器 - 如果子项用百分比宽度（如
width: calc(25% - 12px)），伪元素也要用相同单位（如flex-basis: 25%），否则列宽错位 - 失效点：父容器用了
justify-content: flex-start时，伪元素会紧贴最后一个子项右边，完全没意义
为什么 Grid 是更稳的选择
Flexbox 的“最后一行”问题是设计使然：它把每行当独立行盒处理，但不提供行内空间再分配接口；Grid 则根本没有“最后一行”的概念——它按列格自动填充，justify-content: start 对所有行统一生效。
- 推荐写法：
display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))); justify-content: start; gap: 12px; - 优势：响应式天然友好，增删商品项无需改 CSS；不依赖子项数量或顺序；无伪元素兼容性风险
- 注意点：IE11 及更早版本不支持
auto-fit和minmax()，需降级为 Flexbox 方案或加 polyfill - 性能影响：现代浏览器中 Grid 渲染效率与 Flexbox 相当，但复杂嵌套下 Layout 计算略重，商品列表这种扁平结构完全无压力
真正容易被忽略的是：伪元素方案在服务端渲染（SSR）或动态插入商品时，::after 始终存在，但 JS 若依赖 childElementCount 计算“真实项数”，可能误把伪元素当有效节点——别让它进你的数据逻辑里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
