Flexbox本身不处理折叠，需配合媒体查询、display切换及JavaScript控制显隐；关键在大屏用flex横向布局，小屏隐藏菜单并显示汉堡按钮，点击后通过max-height过渡与flex-direction:column实现平滑展开。
Flexbox本身不处理折叠，得靠媒体查询 + display切换
Flexbox只是布局工具，它不会自动帮你收起菜单。所谓“折叠效果”，本质是小屏时隐藏菜单项、显示汉堡按钮，再通过JavaScript控制显隐——Flexbox只负责让菜单在展开时排成一行或一列，且对齐整齐。
常见错误是以为只写 display: flex 就能响应式折叠，结果小屏下菜单文字挤成一团甚至换行错乱。关键在于：先用 Flexbox 布局好默认状态，再用媒体查询断开它。
- 默认（大屏）用
display: flex横向排列nav ul和子项 - 小屏（如
max-width: 768px）把nav ul设为display: none，同时显示汉堡按钮（.menu-toggle） - 别忘了给
nav加flex-direction: column或重置布局，否则小屏展开后仍试图横排
汉堡按钮点击后如何用Flexbox撑开菜单？
点击显示菜单时，不能简单改回 display: flex —— 如果没设高度或溢出控制，内容可能突然弹出、遮挡其他元素，或者 Flex 容器没分配空间导致子项堆叠。
推荐做法是：用 max-height + overflow: hidden 配合 CSS 过渡，再配合 Flexbox 的 flex-direction: column 和 align-items: stretch 确保子项宽度占满。
立即学习“前端免费学习笔记（深入）”；
- 初始状态：菜单
max-height: 0、overflow: hidden、opacity: 0 - 激活状态（加类如
.is-open）：max-height: 300px（设足够大但非none，否则过渡失效）、opacity: 1 -
nav ul必须设display: flex+flex-direction: column，否则子项不会垂直堆叠 - 避免用
height: auto做过渡，CSS 不支持该属性的动画
移动端点击菜单项后要自动收起？注意 focus 与 touch 事件冲突
很多实现点了菜单项跳转页面后菜单还开着，用户得再点一次关闭——这其实是因为 JavaScript 监听的是 click，但在 iOS Safari 上，首次触摸会触发 focus 而非 click，导致监听失效。
- 统一监听
touchstart和click，或直接用addEventListener('click', handler, { passive: true }) - 收起逻辑建议放在
a标签的onclick里，或监听nav a的事件委托 - 如果用了
preventDefault()，记得只在需要拦截时调用，否则影响跳转 - 别依赖
:focus样式自动收起——它只在键盘操作中可靠，触屏设备不触发
Flexbox菜单在Safari上折叠动画卡顿？检查 flex-wrap 和 transform
Safari 对 flex-wrap 变化（如从 nowrap 切到 wrap）和某些组合属性（如 flex-grow + max-height）的重绘优化较差，容易掉帧。
- 确保折叠容器（
nav ul）没有设置flex-wrap: wrap，小屏下它本就不该换行 - 避免在动画元素上同时使用
transform和flex属性变化，优先用max-height+opacity - 给动画容器加
will-change: opacity, max-height（仅在激活时添加），提示浏览器提前优化 - 测试时禁用
transition看是否仍有卡顿——如果是，问题可能出在 JS 事件节流或 DOM 重排频繁
max-height 过渡必须设具体数值，以及触屏设备上 click 事件的时机不可靠。 
