justify-content: space-between 未生效的主因是父容器未设为 Flex 容器或子元素层级不平级；需确保 display: flex 生效、Logo 与导航为同级子元素，且响应式时配合 flex-direction 调整对齐轴。
justify-content: space-between 为什么没生效
常见现象是写了 justify-content: space-between，但 Logo 和导航项还是挤在左边，甚至完全没反应。根本原因通常是父容器没设成 Flex 容器，或者子元素被包裹在多余层级里（比如导航项套了 <div> 或 <nav> 但没设 display: flex）。
实操建议：
- 确认父容器（比如
<header>）必须有display: flex，且没被其他样式覆盖（检查 computed styles） - 确保 Logo 和导航栏是同一级子元素——不能是
<header> > <div> > <img>+<header> > <nav> > <ul>，得是<header> > <img>和<header> > <nav> - 如果用了语义化标签如
<nav>，它默认是 block，不影响；但别给它加display: inline-block这类干扰布局的样式
Logo 左对齐、导航右对齐的最小可行结构
这不是靠 magic，而是靠两个直接子元素占满主轴两端。只要结构干净，space-between 就能立刻起效。
示例 HTML：
立即学习“前端免费学习笔记（深入）”；
<header style="display: flex; justify-content: space-between; align-items: center;">
<img src="logo.svg" alt="Logo">
<nav>
<ul style="display: flex; gap: 1rem; margin: 0; padding: 0;">
<li><a href="#">首页</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">关于</a></li>
</ul>
</nav>
</header>
关键点：
-
align-items: center是为了垂直居中（否则 Logo 和文字 baseline 对不齐） - 导航内部用
display: flex是为了让<li>横向排列，和外层无关 - 不要给
<nav>设flex: 1或width: 100%，会破坏space-between的“两端固定”逻辑
移动端适配时 space-between 突然失效
问题常出现在媒体查询后，比如加了 flex-direction: column，但忘了改 justify-content 的作用轴——它还在试图沿水平方向分空间，而此时主轴已是垂直方向。
实操建议：
- 响应式切换布局时，
justify-content要配合flex-direction一起调整：横屏用space-between，竖屏改用center或flex-start - 更稳妥的做法是把 Logo 和导航分别包进独立容器（如
<div class="logo">和<div class="nav-wrapper">），这样即使竖屏堆叠，也能单独控制每个容器的对齐方式 - 避免在
@media里只改flex-direction而忽略justify-content，这是最常被漏掉的一行
用 margin-left: auto 替代 space-between 的适用场景
当 Logo 和导航不是同级兄弟（比如导航被封装成自定义组件、或中间插了搜索框等动态内容），space-between 就无能为力了。这时靠 margin-left: auto 更灵活。
示例：
<header style="display: flex; align-items: center;">
<img src="logo.svg" alt="Logo">
<div style="margin-left: auto;">
<nav>...</nav>
</div>
</header>
优势与注意点：
- 不需要严格两个子元素，中间加任何内容都不影响导航右对齐
- 如果后续要加右侧操作按钮（如登录入口），只需把它放在
margin-left: auto的容器里，自然就贴右边了 - 别给这个容器设
flex: 1，否则会撑满剩余空间，导致导航项被拉宽
space-between 就只是个摆设。 
