justify-content: space-between 的本质是按行独立计算：每行首尾子项贴边，中间间隙均分，不保证多行间视觉一致；末行仅2项时仍强制撑满，非bug而是Flexbox底层逻辑。
justify-content: space-between 的行为本质是按行独立计算
它不是“把所有子项均匀摊开”，而是对**每一行内存在的子项**，把首尾两个子项分别钉在该行左右边缘，中间空隙均分。最后一行只有 2 个子项？那就把这 2 个强行撑到容器最左和最右——视觉上就像悬浮居中，实际是严格遵循规范。
这不是 bug，是 Flexbox 主轴对齐的底层逻辑：不区分“满行”或“缺项”，只认当前行内 DOM 节点数量。
加 justify-content: flex-start 为什么没反应
justify-content: flex-start 确实会让每行从左开始排列，但它**不消除该行右侧剩余空间**。只要父容器宽度固定、子项总宽度小于容器宽，末行右侧就会留白——你看到的“没对齐”，其实是空白太显眼，不是位置错了。
常见误操作包括：
- 写了
justify-content: flex-start却还保留justify-content: space-between（后者优先级更高，直接覆盖） - 以为
flex-start能“拉走”右侧空隙，其实它只管起始点，不管结束点 - 没意识到
flex-wrap: wrap下，“行”是渲染时动态切分的，CSS 无权指定某行特殊处理
伪元素补位为什么经常失效
用 ::after 补一个 flex-basis: 100% 占位，本意是让最后一行“假装满员”，从而让 space-between 正常工作。但实际容易翻车：
-
::after默认是 inline 元素，必须显式设display: block或display: flex，否则 iOS Safari 15–16 和部分安卓 WebView 直接忽略flex-basis - 补位后若未同步设置
margin、box-sizing和flex值，占位项尺寸与真实子项不一致，导致错位 - 如果子项用了
flex: 1或width: 100%，占位项会被挤压，补位逻辑彻底崩溃
真正该换思路的地方
Flexbox 从设计上就不支持“按行控制主轴对齐”。当你反复 hack :last-child、::after、nth-child(4n - 2)，其实是在对抗模型限制。此时更轻量的解法是：
- 放弃
space-between，改用gap+justify-content: flex-start（Chrome 85+/Firefox 63+/Safari 14.1+ 全支持） - 列数固定且需两端对齐？直接切
display: grid，用justify-content: space-between+justify-items: start组合，原生支持行级控制 - 动态数据、列数不固定？JS 计算末行缺几个再插入真实占位
div，比纯 CSS 更可控
最容易被忽略的是：justify-content 在多行 Flex 中根本不存在“最后一行特殊对齐”这个能力——不是写法不对，是它压根没提供这个接口。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
