根本原因是父容器未激活flex上下文，必须同时设置display:flex和flex-direction:column；还需配合min-height:100vh、overflow-y:auto及子项display:block等成套配置才能实现垂直导航栏。
flex-direction: column 为什么没让导航栏变垂直？
不是语法写错了，是父容器压根没进 Flex 上下文。浏览器看到 flex-direction: column 却忽略它，因为：
– 父元素漏了 display: flex 或 display: inline-flex
– 父元素被 float、position: absolute 或 display: block !important 覆盖
– 导航项（比如 a）没设 display: block，导致点击热区窄、视觉上像“没排齐”
垂直导航栏必须配哪些高度和溢出设置？
只加 flex-direction: column 不会自动撑高或滚动。关键要成套配置：
– 父容器（如 .navbar）必须有可计算高度：用 min-height: 100vh（推荐）或 height: 100dvh（Safari 16.4+ 更稳）
– 若需滚动，必须在菜单容器（如 ul 或包裹它的 div）上显式写 overflow-y: auto
– 避免 height: fit-content——它不触发滚动，小屏下直接撑破视口
– 子项别乱设 flex-shrink: 0 又不控高，否则父容器会被强行顶高，滚动失效
响应式切换时，column 和 row 之间要注意什么？
桌面横排 → 移动端竖排，不能只改 flex-direction：
– 在 @media (max-width: 768px) 里，除了切回 column，还要重置 justify-content（比如从 space-between 改为 flex-start）
– 水平态下子项建议 flex: 0 0 auto（不伸缩、不换行），垂直态下可设 flex: 1 均分剩余空间（如果需要）
– 别在媒体查询里重复写全部 flex 属性，只覆盖变化项即可
– flex-wrap: wrap 在 column 下完全无效，真要多列请换 Grid 或切回 row
iOS 和 Safari 下的典型坑点
这些细节一漏，导航栏在真机上就塌、卡、点不动：
– iOS 微信内嵌 WebView 对 min-height 解析不稳定，给关键容器补 height: 100% 或 flex: 1
– a 标签必须有足够 padding 和 min-height，否则文字被压成一条线
– 加 cursor: pointer 和 -webkit-tap-highlight-color: transparent，解决点击无反馈问题
– 100vh 在 Safari 滚动时会缩放，优先用 100dvh（Chrome 105+ / Safari 16.4+ 支持）
真正难的从来不是写那一行 flex-direction: column，而是它背后的高度继承链、overflow 触发时机、以及 Safari 对嵌套 flex: 1 的解析差异——这些地方松一扣，布局就无声无息地垮掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
