flex-direction: column 是实现垂直导航的必要条件，需作用于直接包裹菜单项的容器，并配合 min-height、justify-content 和 align-items 等属性协同控制布局效果。
flex-direction: column 是垂直导航的起点，不是全部
只写 display: flex 不会变垂直——默认主轴是水平的。必须显式加 flex-direction: column，且这个声明得落在直接包裹菜单项的容器上（比如 <nav></nav> 或 <ul></ul>），而不是外层 wrapper 或 body。
常见错误：容器没设高度，导致 justify-content 看不出效果。Flex 容器高度由内容撑开，垂直对齐需要参考空间，所以至少得有 min-height: 100vh 或固定 height。
- 用
min-height比height更安全，避免内容超长时被截断 - 移动端 Safari 对
vh有滚动缩放 bug，可改用min-height: 100dvh（需注意兼容性） - 别在子项（如
<a></a>）上乱加flex相关属性，容易干扰主轴对齐逻辑
justify-content 控制“均匀分布”的三种理解方式
垂直菜单里常说的“均匀分布”，实际取决于你选哪个 justify-content 值——它们对首尾留白的处理完全不同：
-
justify-content: space-between：首项顶边贴容器上沿，末项底边贴下沿，中间空隙均分 -
justify-content: space-around：每项上下各占一半间距，视觉松散、居中感强 -
justify-content: space-evenly：所有间隙（含首项前、末项后）完全相等，最接近字面“均匀”
如果容器高度不够或子项太多，space-between 可能让项间距过大甚至溢出；space-evenly 在项数少时顶部底部留白明显，要结合 align-items: center 一起看效果。
align-items: center 让文字不靠左挤成一竖条
垂直布局下，align-items 控制的是交叉轴（也就是水平方向）的对齐。设 align-items: center 后，所有菜单项会水平居中——前提是它们没设固定宽度或 text-align: left 覆盖。
- 若菜单项是
<a></a>标签，记得加display: block，否则点击热区只覆盖文字部分 - 文字本身若用了
line-height或上下margin，可能干扰视觉居中，建议统一用padding控制内边距 - 不要指望
align-items: center自动拉宽子项；它只是居中已有宽度的内容，想均分宽度得另设flex: 1或width
响应式切换时，别只改 flex-direction
桌面端水平、移动端垂直，靠媒体查询切 flex-direction 是主流做法，但只改这一项常导致布局错乱：
- 水平状态建议加
flex-wrap: wrap，防窄屏下导航项被压缩变形 - 垂直状态下，若希望菜单项均分剩余空间，可给每个
<li>或<a></a>加flex: 1；但二级菜单展开时，父容器若没设align-items: stretch或显式高度，容易塌陷 - 断点推荐用
@media (max-width: 768px)，比基于 device-width 的判断更稳定
真正麻烦的不是方向切换，而是二级菜单展开后父容器高度重算失败——这往往是因为父容器缺 min-height 或子项没设 flex-shrink: 0，导致新内容出现时布局抖动或截断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
