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 确保子项宽度占满。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

• 初始状态：菜单 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 重排频繁

Flexbox 让菜单布局干净利落，但它不替代状态管理；真正决定“折叠与否”的是类名切换和 CSS 显隐规则。最容易被忽略的，是 Safari 下 max-height 过渡必须设具体数值，以及触屏设备上 click 事件的时机不可靠。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！