justify-content: space-between 不等于“两端对齐+固定间距”，因其仅均分剩余空间、无法指定像素值，且单子项时失效；真正可控方案是 gap + justify-content: flex-start。
为什么 justify-content: space-between 不等于“两端对齐 + 固定间距”
很多人一上来就写 justify-content: space-between，结果发现：首尾子项紧贴容器边缘，中间空隙“看起来”等宽，但这个空隙大小完全由容器宽度和子项数量动态计算，**你无法指定它必须是 16px 或 24px**。一旦子项数量变化、或容器缩放，间距就变——这不是“固定间距”，只是“均分剩余空间”。更麻烦的是，当只有一项时，space-between 直接失效，元素默认左对齐，毫无预警。
用 gap 实现真正可控的固定间距
gap 是唯一能直接设定像素级间距的现代方案，且天然支持“两端内缩 + 中间等距”的视觉效果：
- 单行布局只需设
gap: 0 16px（第二值为 column-gap，控制左右间距） - 配合
justify-content: flex-start，所有子项从左开始排列，间隙由gap精确维持 - 子项无需清除 margin，不依赖数量，增删元素不影响间距一致性
- 即使子项用了
flex: 1或百分比宽度，gap依然生效（前提是没设flex-wrap: nowrap干扰换行逻辑）
示例：
.container {
display: flex;
flex-wrap: wrap; /* 必须启用，否则 gap 在部分旧 Safari 中不生效 */
gap: 0 16px;
justify-content: flex-start;
}
多行布局下最后一行不拉伸的处理
如果你启用了 flex-wrap: wrap，又误用了 justify-content: space-between，最后一行只有 2 个子项时会被强行拉到左右两端，中间留大片空白。这不是 bug，是规范行为。正确解法仍是靠 gap：
- 去掉
space-between，改用justify-content: flex-start - 用
gap: 12px 16px同时控制行距（第一值）和列距（第二值） - 不需要伪元素补位，也不用
:nth-child计算清除 margin ——gap自动跳过首尾外边距 - 若需兼容 IE 或 iOS 11.2 以下，才考虑降级：
.item:not(:nth-child(4n)) { margin-right: 16px; }，但要注意 DOM 动态变更时易错位
容易被忽略的兼容性与陷阱
gap 在现代浏览器（Chrome 84+、Firefox 63+、Safari 14.1+）中稳定支持，但仍有几个硬伤必须手动兜底：
- Flex 容器必须声明
display: flex且至少有一个子元素参与布局；空容器或display: none子项会导致gap不渲染 -
gap对visibility: hidden的子项仍会计入布局，但对display: none的则完全忽略——这点和 margin 行为不一致，调试时容易误判 - 在
flex-direction: column下，column-gap仍然是左右间距（不是上下），别被名字误导 - 如果子项设置了
margin，它会和gap叠加，造成意外加大——应统一用gap，清掉所有子项的 margin
真正的“两端对齐且固定间距”，本质是放弃让首尾贴边，转而接受“首项离左边缘 = 间距值，末项离右边缘 = 间距值”，这只能靠 gap 配合容器 padding 实现，而不是靠主轴对齐属性硬凑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
