justify-content: space-between 在导航栏中不生效的主因是父容器未设 display: flex 或子元素脱离文档流；需检查 display、float、position 等属性，并注意 align-items、flex-wrap、ie11 兼容性及最小宽度影响。
justify-content: space-between 在导航栏里为啥不生效
常见现象是写了 justify-content: space-between，但左右元素没分开，反而全挤在左边。根本原因通常是父容器没设 display: flex，或者子元素被设了 float、position: absolute 这类脱离文档流的属性，让 flex 布局失效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确认导航栏父元素（比如
<nav></nav>或<div class="navbar">）有 <code>display: flex - 子项（如
<a></a>或<ul></ul>）不能带float、position: absolute、display: inline-block（除非你明确想破坏 flex 流） - 如果用了
<ul><li></ul>结构，记得把<ul></ul>设为display: flex，而不是只给<nav></nav>设 - 给父容器加
align-items: center，让所有子项垂直居中对齐 - 检查 logo 图片是否自带
vertical-align: baseline（默认值），可加vertical-align: middle或直接用img { display: block } - 如果右侧菜单用了
<ul></ul>，注意浏览器默认的padding-left会让它偏移，需重置：ul { margin: 0; padding: 0 } - 加
flex-wrap: nowrap（父容器上），强制不换行 - 配合
overflow-x: auto或媒体查询，在小屏下改用其他布局（比如汉堡菜单） - 避免给子项设固定宽高（如
width: 200px），优先用flex-shrink: 0控制收缩行为 - 测试时用设备模拟器拖动宽度，别只看 375px 静态截图
- 确认项目是否必须支持 IE11；若必须，放弃
space-between，改用margin-left: auto推右元素（仅适用于两个子项） - 例如：左侧
<div class="logo">，右侧 <code><div class="menu">，给 <code>.menu加margin-left: auto - 避免在 IE11 中混用
display: flex和display: -ms-flexbox，后者兼容性更稳但语法不同 - 用
@supports (justify-content: space-between)做特性检测，而非用户代理判断
左右分布时 logo 和菜单总对不齐
典型场景：左侧放 logo，右侧放 <ul></ul> 菜单，但两者基线错位或高度不一致，看起来“不在一条线上”。这不是 justify-content 的问题，而是默认的 align-items: stretch 拉伸子项导致的视觉偏差。
实操建议：
立即学习“前端免费学习笔记（深入）”；
space-between 在移动端缩放后塌陷或换行
当屏幕变窄，flex 子项总宽度超过容器时，space-between 会失效——不是报错，而是自动换行（如果没禁用）或溢出隐藏，导致左右布局“消失”。这不是 bug，是 flex 的默认行为。
实操建议：
立即学习“前端免费学习笔记（深入）”；
IE11 下 space-between 表现异常甚至完全失效
IE11 对 justify-content 支持不完整，尤其在嵌套 flex 容器或遇到 <button></button> 等替换元素时，常出现左右元素贴边、间距错乱。这不是写法错，是渲染引擎限制。
实操建议：
立即学习“前端免费学习笔记（深入）”；
真正容易被忽略的是：flex 容器的最小内容宽度假设（min-width: auto）在某些组合下会让 space-between “假装生效”，实际一测就露馅。动手前先用 DevTools 检查 computed 样式里的 justify-content 是否真的被应用，而不是只看代码写了没。
