小屏幕导航堆叠失效主因是父容器未设 display: flex 或媒体查询未覆盖默认样式；flex-direction 仅对 flex 容器生效，须在对应断点内显式声明。
小屏幕下导航项堆叠失效，flex-direction 没起作用？
常见原因是父容器未设置 display: flex，或媒体查询未正确覆盖默认样式。Flexbox 的 flex-direction 只对 flex 容器生效，且必须在生效的媒体断点内显式声明——它不会“自动切换”，必须靠 CSS 媒体查询手动控制。
- 确保导航容器（如
.nav）在所有断点下都有display: flex - 默认设为
flex-direction: row（水平排列），小屏用@media (max-width: 768px)覆盖为column - 避免在媒体查询外漏写
flex-direction，否则小屏可能继承父级或浏览器默认值
为什么加了 flex-direction: column 后导航项反而挤成一团？
堆叠后元素默认不撑宽，需额外处理宽度和间距。Flex 容器设为 column 时，主轴变为垂直，justify-content 控制垂直对齐，align-items 才控制水平宽度表现。
- 给导航项（
.nav-item）加width: 100%或align-self: stretch确保铺满 - 用
gap替代margin控制堆叠间距，更稳定（gap在column下依然生效） - 移除旧的
float或inline-block布局残留，它们会干扰 flex 行为
flex-direction: column 在 iOS Safari 中不生效？
极少数老版本 Safari（flex-direction 的媒体查询响应有延迟或忽略，但不是 bug，是渲染时机问题。解决方案是补全 flex 相关基础声明，避免依赖单一属性。
- 在媒体查询内同时声明
display: flex和flex-direction: column，不要只写后者 - 加上
flex-wrap: nowrap显式关闭换行（虽然 column 默认不换行，但部分 Safari 会误判） - 避免使用
min-height或height在容器上限制，可能触发 flex 计算异常
要不要用 flex-direction: column-reverse 实现倒序堆叠？
可以，但仅当设计明确要求菜单从底部向上展开时才用。它改变的是视觉顺序，不影响 DOM 结构，对可访问性（如屏幕阅读器读取顺序）和键盘 Tab 流有影响。
立即学习“前端免费学习笔记（深入）”；
-
column-reverse会让第一个导航项出现在最下方，Tab 键也从下往上聚焦 - 如果只是想让“菜单按钮”在顶部、“导航项”在下方，用普通
column+order更可控 - 注意：某些 CSS 重置库（如 Normalize.css）可能隐式设置了
order，导致意外排序
flex-direction 本身不触发响应式，真正起作用的是你写的那条 @media 规则是否精确匹配、是否被更高优先级样式覆盖。 
