display:flex写了但导航没变水平，先检查父容器是否有可计算空间、子元素是否为直系且未脱离文档流、类名是否正确、单位是否完整，并注意flex-direction对justify-content主轴方向的影响。
display: flex写了但导航没变水平？先检查这几点
Flex 不是“开了就灵”，它卡在几个硬性前提上。最常见的是父容器没空间可分，或者子元素已经脱离文档流。
-
display: flex只对直接子元素生效 —— 如果.nav-links里套了ul，而你给.nav-links设了 flex，但真正要排的li是ul的子元素，那li就根本不受控 - 父容器（比如
.navbar）若没设width或被max-width截断，或其父级（如body）没设min-height: 100vh，align-items: center就会“悬空”失效 - 子元素加了
float: left、position: absolute或display: inline，都会让它退出弹性流，flex 属性对其完全无效 - 单位写漏了 —— 比如
width: 120而不是width: 120px，整条 CSS 规则会被浏览器丢弃，连锁影响布局
flex-wrap: wrap 加了还是不换行？关键在收缩许可
Flex 默认不会压缩内容来换行，它只在“允许收缩”的前提下才触发 wrap。光写 flex-wrap: wrap 不够。
- 给每个导航项（如
.nav-item或.nav-link）加min-width: 0—— 这是最常被忽略的一步，没有它，文字宽度锁死，flex 引擎不敢缩 - 删掉
white-space: nowrap—— 它会强制单行，哪怕容器只剩 1px 宽也不折 - 慎用
flex: 1：它等价于flex: 1 1 0%，其中第二个1表示允许收缩；但如果你写了flex: 1 0 auto，第二个参数是0，就禁止收缩，wrap也就失效 - 检查父容器是否被
overflow: hidden或max-width误判可用空间 —— Flex 布局依赖计算出的“剩余宽度”，截断会导致它认为还有空间可挤
移动端垂直堆叠时 justify-content 失效？主轴方向变了
justify-content 控制的是主轴方向的对齐，而主轴由 flex-direction 决定。桌面端是 row（水平），移动端切到 column（垂直）后，justify-content: center 就变成“垂直居中”，不是“水平居中”了。
- 别在媒体查询里盲目复制桌面端的
justify-content: space-between—— 在flex-direction: column下，它会让第一个和最后一个菜单项贴顶贴底，中间留大片空白 - 想让折叠后的菜单整体居中显示？用
justify-content: center+align-items: center组合，前者控垂直位置，后者控水平位置 - 只有两个区块（比如 logo + menu toggle）时，
margin-left: auto比justify-content: space-between更稳 —— 它不依赖子元素数量，也不受flex-direction切换干扰
汉堡菜单该用 display: none 吗？可访问性会掉链子
用 display: none 隐藏移动端菜单，屏幕阅读器会直接跳过整个 nav，对视障用户不可见。这不是“隐藏”，是“删除”。
- 正确做法是保留 DOM 结构，用视觉隐藏：例如
position: absolute; clip-path: inset(100%)，元素仍在渲染树里，辅助技术可读 - 配合
aria-expanded="false"控制状态，并在 JS 切换时同步更新 —— Bulma、Bootstrap 等框架都依赖这个属性做语义化提示 - 如果用 JS 控制
is-active类（如 Bulma），确保点击事件绑定在.navbar-burger上，并通过dataset.target精准找到对应.navbar-menu，否则展开逻辑形同虚设
min-width: 0 和 flex-direction 切换后 justify-content 含义的偏移 —— 这两点不处理，其他设置再全也白搭。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
