flex-wrap不能实现导航栏折叠，因其仅换行渲染而不隐藏元素；真折叠需媒体查询+display切换+checkbox控制逻辑，配合max-height过渡动画与逐级隐藏策略。
flex-wrap 本身不能实现“折叠”，它只负责换行；真要折叠导航栏，必须配合媒体查询 + display 切换 + checkbox 控制逻辑，否则小屏下要么溢出，要么堆成多行占满屏幕。
为什么 flex-wrap: wrap 不能直接用于导航栏折叠
它只是让 .nav-menu li 在空间不足时垂直堆叠，但所有项仍参与渲染、占据布局流——小屏下可能挤成两行文字、触发横向滚动，或把导航栏撑高到遮挡内容。用户要的是“点一下才展开”，不是“自动折成四行”。flex-wrap 没有隐藏能力，也不响应点击，更无法做过渡动画。
- 写了
flex-wrap: wrap却没效果？先确认父容器有没有明确的width或max-width（比如width: 100%不够，得是max-width: 1200px这类约束） - 子项用了
flex: 1或固定width？这会让浏览器优先拉伸而非换行 - 没设
gap或padding？换行后项之间可能紧贴甚至重叠
@media 查询中该隐藏哪些元素
不是笼统地 “隐藏菜单”，而是按交互优先级逐层收起：主导航链接 > 搜索框 > 下拉触发按钮 > 副标题/徽标文字。否则小屏会出现空白占位、错位图标或孤零零的搜索框悬在右上角。
- 默认用
display: none隐藏整个.nav-menu容器（别只对li设display: none） - 若搜索框不在
.nav-menu内，必须一并在媒体查询里加display: none -
.dropdown-toggle和其子菜单.dropdown-menu要同时设display: none，否则小屏点开后菜单不显示 - 避免用
visibility: hidden：它仍占空间，会导致父容器高度异常
汉堡图标必须用 label + checkbox 绑定
DOM 顺序和绑定方式错了，:checked ~ .nav-menu 就不会生效。iOS Safari 对隐式关联支持不稳定，显式 for 属性最稳妥。
- 正确结构：
<input id="nav-toggle" type="checkbox"><label for="nav-toggle">☰</label><nav class="nav-menu"></nav> - 隐藏
input推荐用position: absolute; clip: rect(0 0 0 0);，而不是opacity: 0或visibility: hidden（影响可访问性） - 别给
label加onclick或preventDefault：它本职就是触发checkbox，加 JS 反而破坏键盘导航和屏幕阅读器
max-height 过渡动画不能写 height: auto
height: auto 无法参与 CSS 过渡，硬写会跳变或不动。必须用 max-height 设一个足够大的值，确保所有菜单项都能完整展开。
- 推荐设
max-height: 500px（根据实际最大高度微调，宁大勿小） - 展开时从
max-height: 0→max-height: 500px，配合overflow: hidden - 别忘了设
transition: max-height 0.3s ease-in-out，且确保.nav-menu初始状态是max-height: 0; overflow: hidden
真正难的不是写出 flex-wrap: wrap，而是判断什么时候该让它退场——当屏幕窄到交互成本高于展示价值时，就得切到 checkbox 控制模式。很多人卡在“换行看起来像折叠”这一步，结果上线后小屏用户根本找不到菜单入口。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
