justify-content: space-between未生效的根本原因是父容器中只有一个可渲染子元素，此时Flex默认左对齐且不触发space-between；需确保至少两个子项、无脱离文档流元素，并可用::after伪元素轻量补足。
flex布局下justify-content: space-between为什么没生效
常见现象是元素只有一行，但左右两端没对齐，反而挤在左边。根本原因不是写法错，而是space-between只对“多个子项”起作用——如果父容器里只有一个子元素，它会被当成唯一锚点，自动居左（Flex默认main-start对齐），此时space-between完全不触发。
使用场景：导航栏、按钮组、表单项标签+输入框组合等需要首尾撑开的单行结构。
- 确认父容器至少有两个可渲染的子节点（空
<div></div>也算，但不能是display: none或visibility: hidden） - 检查子元素是否被
float、position: absolute脱离文档流，这会让Flex忽略它们 - 避免给子元素设
margin: auto，它会覆盖justify-content行为
用::after伪元素补足“第二个子项”来触发space-between
这是最轻量、无侵入的解法：不改HTML结构，只靠CSS补一个透明占位符，让Flex认为有两个子项，从而激活space-between逻辑。
参数差异在于伪元素必须满足两个条件：可渲染（哪怕透明）、不破坏布局（content: "" + width: 0即可）。
立即学习“前端免费学习笔记（深入）”；
示例：
nav {
display: flex;
justify-content: space-between;
}
nav::after {
content: "";
}
注意：::after默认是inline，需确保父容器display: flex能正确包含它；若父容器有flex-wrap: wrap且内容超宽，伪元素可能换行，此时应加flex-shrink: 0防压缩。
为什么不用text-align: justify配text-align-last: justify
这个方案看似直接，但实际限制极多：只对内联级元素（如span、文本）有效，对div、button等块级子项无效；且text-align-last在Firefox中长期不支持，Safari直到16.4才修复兼容性问题。
性能影响不大，但维护成本高：你得把所有子元素转成inline-block，再手动处理垂直对齐（vertical-align: top），间隙还要用font-size: 0或注释消除。
- 仅适用于纯文字标题+图标组合，且能接受浏览器兼容性妥协
- 遇到
margin或padding不一致的子项，两端对齐会错位 - 响应式缩放时，字间距拉伸不可控，容易出现难看的过大间隙
真正可靠的单行两端对齐：用flex: 1分配剩余空间
当只有两个关键子项（比如左侧logo + 右侧菜单）时，比space-between更可控：给中间加一个空<div>并设flex: 1，它会自动撑满剩余空间，把两边顶到尽头。
优势是逻辑清晰、兼容性好（IE10+）、不依赖子项数量变化；缺点是HTML多一个无语义节点，不过现代框架里常封装为<Spacer />组件，实际影响很小。
示例：
<nav>
<div class="logo">Logo</div>
<div class="spacer"></div>
<div class="menu">Home About Contact</div>
</nav>
nav .spacer { flex: 1; }
容易踩的坑：别给.spacer设width或min-width，否则会干扰Flex计算；如果菜单本身是Flex容器，记得给它加justify-content: flex-end确保内部右对齐。
复杂点在于，当需要两端对齐的不只是两个元素（比如三段文字：左标签、中输入框、右单位），就得拆成嵌套Flex或用margin-left: auto推最后一项——这时候space-between反而更干净，前提是确认子项数量稳定。
