justify-content: space-between 是单行两端对齐的标准解法，但多行时会导致最后一行也被拉伸；推荐用 gap + justify-content: flex-start 实现多行左对齐，伪元素补位仅在严格保持间隙节奏时使用。
justify-content: space-between 是最直接、最可靠的实现方式，但仅适用于单行且子元素数量 ≥ 2 的场景。多行换行时它会让最后一行也“两端对齐”，这往往不是你想要的效果。
单行两端对齐：用 justify-content: space-between
这是标准解法，无需额外 hack。只要容器是 display: flex、子元素至少两个、且不换行（flex-wrap: nowrap），就能让第一个子元素贴左、最后一个贴右，中间等距分布。
常见错误现象：space-between 在只有一个子元素时无效（它没“之间”可分），此时元素会默认左对齐；若子元素设置了 margin 或 padding，可能干扰视觉对齐，建议先清空或统一控制。
- 必须确保父容器有明确宽度（比如
width: 100%），否则可能撑不满 - 子元素不能设
flex: 1或width: 100%，否则会挤占全部空间，失去“之间”的余地 - 主轴方向由
flex-direction决定：默认row是水平两端对齐；设为column则是垂直两端对齐
多行换行时最后一行左对齐：避免 space-between 的陷阱
当你用了 flex-wrap: wrap，justify-content: space-between 会对每一行都生效——包括最后一行。结果就是：最后一行只有 2 个元素时，它们也会被拉到左右两端，中间大片空白。
这不是 bug，是规范行为。真正要解决的是“最后一行不满时左对齐”，而不是强行让 space-between 改变逻辑。
- 推荐用
gap+justify-content: flex-start：现代浏览器支持良好，代码干净，gap控制间距，flex-start确保每行都从左开始排布 - 如果需兼容旧浏览器（如 IE 或早期 Safari），改用
margin-right配合:nth-child：例如每行 4 个，则.item:not(:nth-child(4n)) { margin-right: 16px; } - 注意
:nth-child依赖 DOM 结构顺序，遇到display: none或动态增删元素时容易错位，此时应改用 JS 计算或 CSScontainer queries（较新）
伪元素补位法：只在必要时用
当必须保留 space-between 的视觉节奏，又想骗过浏览器让最后一行“看起来左对齐”时，可用伪元素占位。原理是往容器末尾插入一个不可见但参与 flex 计算的元素，凑满一行数。
关键细节极易出错：
- 伪元素必须设
flex: 0 0 [width]，且[width]要和真实子项的宽度单位一致（比如都是24%或都是200px） - 不能用
visibility: hidden或opacity: 0，它们仍占渲染空间，会影响 flex 分配；正确做法是height: 0; overflow: hidden; font-size: 0; - 响应式下必须配合媒体查询重置伪元素宽度，否则小屏时宽度错配会导致整行偏移
别混淆 text-align: justify 和 Flex 两端对齐
text-align: justify 是纯文本对齐，靠调整单词/字符间距实现，只对内联内容（如 span、p 中的文字）有效，对块级子元素完全无效。有人试图给 flex 容器设 text-align: justify，结果发现没反应——这是预期行为，不是配置错误。
如果你真需要文本两端对齐，确保：
- 文本容器是块级元素（如
p或div） - 文本内部有自然空白符（空格、换行），否则浏览器无处“拉伸”
- 避免在文本中混用
display: inline-block子元素，它们会破坏justify的计算逻辑
实际项目里，优先选 gap + flex-start；只有当设计稿严格要求“所有行都保持相同间隙节奏”，才考虑伪元素补位——那部分最容易在迭代中漏掉响应式适配，上线前务必在真机小屏上验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
