display:flex没效果的根本原因不是Flex失效，而是父容器缺乏可计算空间或子元素脱离弹性流；需确保父容器有明确宽高、子元素为直系且未被float/position脱离文档流、类名正确、单位完整，并注意flex-direction对justify-content主轴方向的影响。
为什么 display: flex 写了却没效果
不是 Flex 没生效，而是父容器或子元素卡在几个硬性前提上：display: flex 只对直接子元素起作用，且要求父容器有可计算的空间。常见失效点包括：
-
.navbar设了display: flex，但它的父级（比如<body>）没设min-height: 100vh，导致align-items: center在垂直方向“无空间可分” - 导航项是
<li>，但被加了float: left或position: absolute，已脱离弹性流，Flex 属性对其完全无效 -
.nav-logo宽度写成width: 113（缺单位），CSS 解析失败，整个规则被丢弃，连锁影响后续布局 - HTML 中类名拼错，比如 CSS 写
.boder，HTML 用class="border"，样式根本不会应用
justify-content 在桌面端和移动端的取值逻辑
它控制的是主轴方向的对齐，而主轴方向由 flex-direction 决定——这点容易混淆。实际使用中：
- 桌面端水平菜单（
flex-direction: row）：justify-content: space-between让 logo 左贴、登录按钮右贴；justify-content: center把所有菜单项聚在中间 - 移动端折叠后设
flex-direction: column，此时justify-content: center控制的是垂直方向——正好让整列菜单在屏幕中央 - 避免在小屏下用
space-around或space-evenly，间隙会随屏幕变窄而失衡，按钮可能被挤出视口 - 如果只有两个区块（如 logo + nav），想左-右分离，
margin-left: auto比space-between更可控，不依赖子元素数量
flex-wrap: wrap 为什么加了还是不换行
因为默认 min-width: auto 会让每个 <a> 死守文字宽度，Flex 不会主动压缩内容。换行不是“自动发生”的，而是需要明确允许收缩：
- 给导航项（如
.nav-links li或.nav-links a）加min-width: 0，这是关键一步 - 删掉
white-space: nowrap—— 它会锁死单行，哪怕容器再窄也不折 - 用
flex: 1 1 auto替代flex: 1，前者允许收缩，后者强制拉伸填满 - 检查父容器是否被
overflow: hidden或max-width截断，这会让 Flex 引擎误判可用空间
移动端汉堡菜单的隐藏/显示该用 display: none 吗
不该。它会让屏幕阅读器跳过整个导航，破坏可访问性。更稳妥的做法是：
立即学习“前端免费学习笔记（深入）”；
- 用
position: absolute; clip-path: inset(100%)隐藏菜单，DOM 仍在，辅助技术可读 - 配合
aria-expanded="false"和点击同步更新该属性，否则语音助手无法感知状态变化 - CSS-only 方案可用
input[type="checkbox"] + label + ul结构，靠:checked ~ ul控制显隐，避免 JS 失效风险 - 如果要用过渡动画，
max-height: 0 + overflow: hidden比height: 0更稳定，不受子元素高度计算误差影响
真正难的从来不是怎么写 flex，而是断点设在哪、换向后结构要不要重排、以及 active 状态谁来维护——这些细节没对齐，再多的 Flex 属性也撑不起一个可用的导航栏。
