Flex导航栏小屏不折叠因flex-wrap: nowrap和min-width冲突；下拉菜单不显因z-index/position缺失；移动端:hover失效需改用:focus-within或JS；Safari 14以下错位因flex: 1解析bug，应写全参数。
Flex导航栏在小屏幕下不折叠？检查flex-wrap和min-width冲突
Flex默认是单行布局，flex-wrap: nowrap（浏览器默认值），一旦菜单项总宽度超过容器，就会溢出或横向滚动，根本不会“自适应”。很多人以为加了display: flex就万事大吉，其实没设flex-wrap: wrap，小屏下所有li仍挤在同一行。
更隐蔽的坑是子项设置了min-width: 200px这类固定值——哪怕容器只剩100px宽，它也硬要占200px，直接撑爆布局。响应式不是靠“让内容缩得更小”，而是靠“让内容换行或隐藏”。
- 给导航容器（如
nav或.navbar）显式声明flex-wrap: wrap - 移除
li或a上的min-width、white-space: nowrap - 用
flex-basis替代width控制项宽，例如flex: 1 1 calc(25% - 1rem)适配4项均分
点击菜单图标后下拉菜单不显示？别只写display: none，记得处理z-index和position
纯CSS实现汉堡菜单时，常把.dropdown设为display: none，JS切换show类加display: block——但若父容器是flex且没设position: relative，下拉层会脱离文档流，被遮在其他元素下面，或者定位飘移。
另外，display切换有渲染延迟，用户可能看到“闪一下再出现”，不如用opacity + visibility组合过渡更顺滑。
立即学习“前端免费学习笔记（深入）”；
-
.dropdown必须包裹在带position: relative的父容器里（比如.navbar） - 下拉菜单本身设
position: absolute+top: 100%+ 合理z-index（至少10） - 避免只靠
display控制显隐；推荐.dropdown { opacity: 0; visibility: hidden; transition: opacity 0.2s; }，激活时改opacity: 1; visibility: visible;
移动端触摸区域太小，:hover失效？把交互逻辑从:hover移到:focus-within或JS事件
很多教程直接用nav:hover .dropdown实现悬停展开，这在手机上完全无效——因为没有hover状态，手指点下去只会触发focus，然后立刻失焦。结果就是：点一次没反应，点两次才展开，体验极差。
真正兼容触控和鼠标的方式，是放弃纯CSS悬停，改用:focus-within（支持现代浏览器）或最小化JS（仅切class）。
- 把
.dropdown显隐逻辑绑定到.nav-toggle按钮的:focus-within，例如：.navbar:focus-within .dropdown { opacity: 1; visibility: visible; } - 按钮本身加
tabindex="0"确保可聚焦 - 如果需兼容IE或老Android，用最简JS：
toggleBtn.addEventListener('click', () => menu.classList.toggle('open'))，配合CSS.menu.open { display: block; }
Flex导航在Safari 14以下错位？检查flex: 1是否被错误解析
Safari 13–14对flex: 1（即flex: 1 1 0%）的解析有bug：当父容器flex-direction为row时，它可能把0%当成0px，导致子项宽度计算归零。常见现象是logo或菜单项突然消失，或文字重叠。
这不是Flex写法错了，是旧版WebKit的实现缺陷。绕过方式很直接：不偷懒，写全三个参数。
- 把
flex: 1改成flex: 1 1 auto或flex: 1 1 max-content - 对需要等分的项，用
flex: 0 1 calc(33.333% - 0.5rem)这类明确值，避开0% - 真要兼容Safari 13，建议加
@supports not (flex: 1 1 0%) { ... }降级规则
实际做下来你会发现，所谓“自适应”，核心不在怎么让菜单变小，而在于明确每种尺寸下“哪些东西该换行、哪些该隐藏、哪些该接管焦点”。Flex只是工具，关键还是得想清楚交互路径和断点意图。
