justify-content: space-between 不能实现两端留白，因它仅均分子项间剩余空间，首尾子项紧贴容器边缘；gap 配合 justify-content: flex-start 才能真正控制等距内缩。
justify-content: space-between 为什么不能直接实现两端留白
它只负责把子项之间的剩余空间均分，首尾子项永远紧贴容器边缘——也就是说，左右两侧的空白是 0。你看到的“中间空隙”，其实是容器宽度减去所有子项宽度后的余量，动态变化，无法控制两端距离。
常见错误现象包括：写了 justify-content: space-between 却发现第一个按钮顶到最左、最后一个顶到最右；加了 padding 后整体偏移或换行错位；子项用了 flex: 1 或 width: 100% 导致没空间可分。
- 父容器必须有
display: flex，仅设flex-direction不生效 - 子项不能撑满容器总宽（比如两个
width: 50%的项） - 启用
flex-wrap: wrap后，每行单独计算，最后一行可能只剩一个子项，就变成左对齐
用 gap + justify-content: flex-start 是最简解法
现代浏览器下，gap 才是真正能同时控制“项间间距”和“视觉上两端内缩”的属性。它不依赖子项数量，也不影响首尾定位逻辑，只需配合 justify-content: flex-start 就能自然形成“左边距 = 项间距 = 右边距”的效果。
单行布局写 gap: 0 16px（第二值是 column-gap），多行加 flex-wrap: wrap 后可用 gap: 12px 16px 分别控制行距和列距。
-
gap在 Safari 14.5 及更早版本、IE11 中不支持 Flex 布局，需降级 - 不要和
justify-content: space-between混用——gap和space-between的间隙逻辑互斥 - 若子项本身有
margin，会与gap叠加，建议清空子项的margin
兼容老浏览器时用伪元素占位
当必须支持 IE11 或旧版 Safari，又需要“所有空白完全相等”（含两端），伪元素是最稳妥的方案：在容器前后插入两个不可见但参与 Flex 计算的占位项，让 justify-content: space-between 把空白均分成 n+1 份（n 为真实子项数）。
关键不是隐藏内容，而是确保它们不拉伸、不占内容空间：
- 伪元素必须设
content: ""+flex: 0 0 0 - 用
visibility: hidden而非display: none，后者会让伪元素退出 Flex 流程 - 不要给真实子项加
margin，否则会干扰等距计算
别踩 margin 模拟 gap 的坑
有人试图用子项的 margin-right 和父容器的负 margin-right 来模拟 gap，但极易出错：只抵消右边不抵消底部，会导致水平滚动条；只给最后一行末尾子项加 margin 又难维护；响应式断点切换时容易崩。
如果真要用 margin，必须严格成对：
- 所有子项统一加
margin-right: 16px和margin-bottom: 12px - 父容器加
margin-right: -16px和margin-bottom: -12px - 绝对避免用
margin-left或margin-top，首项/首行前不需要间隙
伪元素方案和 gap 方案都比这个更干净。真正的难点不在怎么写，而在判断当前项目是否需要兼容旧浏览器——一旦确定要保 IE11，就得从一开始放弃 gap，而不是临时打补丁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
