justify-content: space-between 在导航栏无效，主因是父容器未设 display: flex、子元素非直接子级、存在 float/inline-block 等干扰样式，或响应式断点中 flex 属性丢失；需确保 flex 上下文完整且子项结构扁平。
justify-content: space-between 在导航栏里为什么没效果
直接加 justify-content: space-between 却发现左右没分开？大概率是父容器没设成 display: flex，或者子元素被包裹在多余标签里（比如每个 <li> 外还套了 <div>），又或者父容器宽度不够、子元素用了 <code>float 或 display: inline-block 破坏了 Flex 上下文。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确认导航容器是
display: flex，且没有其他 display 覆盖（比如inline-flex也行，但别混用） - 检查子元素是否都直属于该容器——
<nav><ul><li>Home</li></ul></nav>这种结构，要对<ul></ul>设 flex，不是对<nav></nav> - 移除子项上的
float、vertical-align、或display: inline类样式，它们会干扰 flex 排列 - 确保容器有足够宽度（比如
width: 100%或不设固定宽），否则 space-between 没空间可分
左右分布时 logo 在左、菜单在右，但菜单文字挤成一团
常见于移动端折叠后又展开的导航：菜单项用 flex 布局，但没处理换行或最小宽度，导致小屏下文字重叠或溢出。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给菜单容器（如
<ul></ul>）加flex-wrap: wrap，避免强制单行撑破容器 - 为每个菜单项（
<li>）设min-width: max-content或white-space: nowrap，防断字；但更稳妥的是用flex-shrink: 0防压缩 - 如果菜单项含图标+文字，用
display: flex; align-items: center统一对齐，避免基线错位拉高容器 - 注意
space-between只管主轴间距，交叉轴（垂直方向）对齐要用align-items控制
响应式断点下左右分布失效，菜单突然跑到下面去了
这不是 justify-content 的问题，而是媒体查询里漏掉了 flex 属性重置。比如桌面端设了 flex，但移动端改成了 block 或忘了恢复 flex，导致 space-between 失效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 移动端优先写法：默认设
display: flex和justify-content: space-between，再在大屏媒体查询里微调（比如加gap） - 如果必须桌面优先，确保每个断点都显式声明
display: flex，别依赖继承 - 检查是否在媒体查询中误写了
flex-direction: column却没配align-items，这会让左右分布变成上下堆叠 - 用浏览器开发者工具的「Flexbox 面板」实时看主轴方向和剩余空间，比猜快得多
justify-content: space-between 和 justify-content: flex-end 的实际区别在哪
看起来都是“靠右”，但行为完全不同：space-between 要求至少两个子元素，它把第一个钉左、最后一个钉右、中间均分空白；而 flex-end 是让所有子元素整体右对齐，不管几个。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 只有 logo + 一个菜单容器（
<ul></ul>）时，用justify-content: flex-end无法实现“logo 左、菜单右”——因为只有一个 flex 项，它只会右贴边 - 真正需要左右锚定，至少得两个直系子元素，例如：
<div class="logo"></div> <div class="menu"></div>，再对父容器设space-between - 若菜单是动态生成的（可能为空），加个空
<div></div>占位会破坏语义，不如用margin-left: auto推开最后一个元素——这是更可控的替代方案
最常被忽略的是：flex 容器的 min-width 和子项的 flex-basis 会直接影响 space-between 的可用空间。没内容时看不出，一加文字就溢出，这时候光调 justify-content 没用，得回头查尺寸链。
