justify-content: space-between实现首尾贴边、中间等距，但仅分配子项间间隙（n个子项产生n−1个间隙），不包含首尾到容器边缘的空白；失效主因是缺少display: flex、子项总宽超容器或flex-wrap换行。
直接用 gap 最省事，但前提是父容器是 display: flex 或 display: grid；否则只能靠 margin + :nth-child 手动算，且容易在动态增删或换行时出错。
为什么 justify-content: space-between 常常不生效
根本不是 CSS 写错了，而是 HTML 结构没对上 Flex 的要求：
-
img、span这类元素默认是display: inline，放进display: flex容器里会被当成“行内内容”，不是真正的 Flex 子项 - 父容器里夹了空格、换行符，或者用
<div></div>包了一层——Flex 只认**直接子元素**，中间多一层就失效 - 子元素本身设了
float或position: absolute，它就脱离文档流，Flex 完全管不了 - 旧版 Safari（≤15.4）不支持
justify-content: space-evenly，写了也白搭
gap 是什么，哪些地方能用
gap 是布局层原生属性，不参与盒模型计算、不触发重排、不影响 justify-content 对齐。但它有硬性前提：
- 只在
display: flex或display: grid容器中生效，其他任何布局（block、inline-block、float）下完全被忽略 -
gap: 12px表示所有相邻子项之间都是 12px，但首尾项与容器边缘**没有额外间隙**——这点和space-between不同，但更可控 - 需要兼容老 Safari 时，得加
-webkit-gap: 12px，否则空白会消失 - 不能用
gap控制“首项前”或“末项后”的留白，那部分还得靠padding或margin
不用 Flex/Grid 时，怎么靠 margin 实现等距
当结构无法修改（比如 CMS 输出固定 HTML）、或要兼容 IE 时，只能手动控制 margin：
- 给每个子项统一设
margin-right: 20px，再用:nth-child(last-of-type) { margin-right: 0 }把最后一个的右外边距清掉 - 垂直方向优先用
margin-bottom，因为块级元素上下margin会合并，容易出错 - 避免写
margin: 0 20px这种简写——左右margin同时加，首尾都会多出 20px，视觉上变成“两端空太多” - 如果子项数量不固定（比如动态列表），纯 CSS 很难精确控制，这时就得靠 JS 补位，或改用
gap+flex-wrap
真正容易被忽略的是：等间距 ≠ 等视觉节奏。图片宽高不一、字体行高不同、甚至 vertical-align 的默认值，都会让“数学上等距”的元素看起来歪斜或松紧不一。动手前先检查子项是否尺寸一致、是否都设了 box-sizing: border-box、有没有意外的基线对齐干扰。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
