本文详细讲解如何借助CSS Flexbox，正确构建一个左侧垂直排列的固定导航菜单，有效规避因缺少容器布局声明而导致的水平堆叠问题，并提供可直接套用的样式与结构代码，助你快速实现响应式侧边导航。
先理清一个关键点：默认状态下，像确实会逐一垂直排列。这看似“符合预期”，但如果目标是实现左侧垂直菜单（例如配图中展示的侧边栏样式），那就远不止垂直堆叠这么简单——你还需要控制布局方向、合理分配空间，并确保每个菜单项内的图标与文字能够精确对齐。
在原代码中，.mobile-na v虽然设置了position: fixed并占满全宽，但内部列表并未启用Flex布局。结果.na v-item依然按照文档流垂直排列——这看起来“好像没错”，但实际上与期望的图标+文字垂直居中、等宽分栏的侧边菜单效果相差甚远。
修复的核心其实只有两件事：一是为导航容器启用Flex布局，二是合理分配内部空间。直接来看修正后的CSS：
.mobile-na v { position: fixed; bottom: 0; left: 0; width: 100%; height: 100vh; /* 替换原错误语法：(var(--vh, 1vh) * 100) → 应为 calc(100vh) 或直接 100vh */ background-color: var(--primary-container); color: var(--on-background-variant); padding-block: 12px 16px; z-index: 4; box-shadow: var(--shadow-1);}/* 启用水平主轴布局，使菜单项横向排列（适用于底部横栏）*//* 但若需「左侧垂直菜单」，应改为： */.mobile-na v .na vbar-list { display: flex; flex-direction: column; /* 垂直排列菜单项 */ height: 100%; /* 占满父容器高度 */ justify-content: center; /* 垂直居中（可选） */ gap: 8px; /* 项目间间距 */}.mobile-na v .na vbar-list .na v-item { width: 100%; /* 确保每项宽度撑满 */}.mobile-na v .na vbar-list .na v-item .na v-link { display: flex; flex-direction: row; /* 图标在左，文字在右 */ align-items: center; gap: 12px; padding: 10px 16px; border-radius: 8px; text-decoration: none; color: inherit; transition: background-color 0.2s;}.mobile-na v .na vbar-list .na v-item .na v-link:hover,.mobile-na v .na vbar-list .na v-item .na v-link[aria-current="true"] { background-color: rgba(255, 255, 255, 0.1);}
需要注意以下几点：
- 原代码中的
height: (var(--vh, 1vh) * 100)属于无效语法——CSS里直接用*做运算是不被支持的。如果确实需要使用变量，应写成height: calc(var(--vh, 1vh) * 100)，同时确保--vh已被正确定义。 - 若目标是实现左侧垂直菜单，那么
.mobile-na v的定位就不能再是bottom: 0; left: 0;，而应改为top: 0; left: 0;，宽度也需要相应收窄——例如窄栏设为80px，带文字的菜单设为240px，同时去掉width: 100%。 - Material Symbols图标需要提前引入Google Fonts CDN或本地字体文件，否则图标将无法正常显示。
- 建议为
.na v-link添加text-decoration: none和color: inherit，这样默认链接样式就不会干扰整体设计效果。
最后来看最终效果：菜单纵向贴靠页面左侧，每个导航项中的图标与文字水平对齐、等距分布，悬停时有明显的视觉反馈，当前页也有高亮标识。这套方案既保留了语义化的HTML结构，又充分利用了现代CSS的布局能力，无论是桌面端的侧边导航，还是移动端的抽屉菜单，都可以作为基础框架直接使用。
