justify-content: space-between 在子元素少于2个时不生效，因规范要求至少2个子项才分配间隙；单元素默认对齐主轴起点，非异常而是严格遵循标准。
justify-content: space-between 为什么在子元素少时“不生效”
它根本不是“异常”，而是逻辑严格按规范执行：当父容器里只有 1 个可渲染子元素时，justify-content: space-between 完全不触发——Flex 规范定义它只在 ≥2 个子项间分配间隙。此时元素默认对齐到主轴起点（左/上），看起来像“没反应”。
常见误判场景：
- HTML 中实际只有一个
<div>，但误以为::after或空标签已参与布局（需确认是否被display: none或visibility: hidden排除） - 子元素被
position: absolute或float脱离文档流，Flex 容器视其为“不存在” - 子元素设了
margin: auto，它会直接抢占主轴空间，覆盖justify-content行为
flex-wrap: wrap 下最后一行只有1–2个元素时的空白问题
这是 space-between 最典型的“表现异常”：最后一行元素被硬推到左右两端，中间大片留白。原因在于，flex-wrap: wrap 后每一行都独立应用 justify-content，而最后一行剩余空间未被其他行“借用”。
可靠解法是用伪元素占位，但必须满足三个条件：
立即学习“前端免费学习笔记（深入）”；
-
::after必须有明确宽度（与真实子项一致，如width: 33.33%） - 设
height: 0+visibility: hidden（不能用display: none，否则不参与布局计算） - 加
flex-shrink: 0防止在小屏下被压缩变形
示例关键 CSS：
.container { display: flex; flex-wrap: wrap; justify-content: space-between; } .item { width: 33.33%; } .container::after { content: ""; width: 33.33%; height: 0; visibility: hidden; flex-shrink: 0; }
子元素带 margin 时的实际间距远超预期
margin 不会被 space-between 覆盖或抵消，而是叠加在其计算出的间隙之外。比如你设了 margin-right: 12px，再启用 space-between，最终相邻元素间距 = space-between 分配值 + 12px。
更糟的是，如果混用左右 margin（如同时设 margin-left 和 margin-right），间隙可能翻倍。正确做法：
- 统一只设单侧 margin（推荐
margin-right） - 用
:last-child { margin-right: 0; }清掉末项 - 优先用
gap替代 margin 控制间距（gap与space-between兼容且不叠加）
移动端小屏下 fixed-width 子项导致溢出却无反馈
space-between 只负责分配剩余空间，它不管子元素是否撑爆容器。例如子项设了 width: 200px，在 375px 宽的手机屏上强行放 2 个，就会横向溢出或触发滚动条——而 space-between 依然安静地“分着它以为存在的空隙”。
这不是 bug，是设计使然。应对方式：
- 用
flex: 0 1 auto允许子项收缩（避免flex-shrink: 0） - 配合
min-width+ 媒体查询动态调宽，而非死守固定像素 - 真要强一致性布局，改用
display: grid+gap，它对换行和响应式更鲁棒
真正容易被忽略的，是那些看似无关的干扰项：一个 display: inline 的父容器、一行被注释掉的 flex-wrap: wrap、甚至开发工具里没刷新的缓存样式——它们都能让 space-between 在你眼皮底下静默失效。
