本文详解如何通过 css flexbox 正确构建左侧垂直排列的固定导航菜单，解决因缺少容器布局声明导致的水平堆叠问题，并提供可直接复用的样式与结构代码。

本文详解如何通过 css flexbox 正确构建左侧垂直排列的固定导航菜单，解决因缺少容器布局声明导致的水平堆叠问题，并提供可直接复用的样式与结构代码。

默认情况下，

元素以块级方式渲染，其子项
• 会垂直堆叠；但若目标是左侧垂直菜单（如图中左侧样式），需明确控制布局方向与空间分配。原代码中 .mobile-nav 虽设为 position: fixed 并占据全宽，但未对内部列表启用 Flex 布局，导致 .nav-item 仍按文档流垂直排列——这看似“符合预期”，实则与用户期望的图标+文字垂直居中、等宽分栏式侧边菜单不符。

  关键修复在于为导航容器启用 Flex 布局并合理分配空间：

  

  CSS3带头像的彩色垂直菜单

  CSS3带头像的彩色垂直菜单

  下载

  .mobile-nav {
    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-nav .navbar-list {
    display: flex;
    flex-direction: column; /* 垂直排列菜单项 */
    height: 100%;           /* 占满父容器高度 */
    justify-content: center; /* 垂直居中（可选） */
    gap: 8px;               /* 项目间间距 */
  }
  
  .mobile-nav .navbar-list .nav-item {
    width: 100%;            /* 确保每项宽度撑满 */
  }
  
  .mobile-nav .navbar-list .nav-item .nav-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-nav .navbar-list .nav-item .nav-link:hover,
  .mobile-nav .navbar-list .nav-item .nav-link[aria-current="true"] {
    background-color: rgba(255, 255, 255, 0.1);
  }

  ⚠️ 注意事项：

  • 原 CSS 中 height: (var(--vh, 1vh) * 100) 是无效语法，CSS 不支持算术运算符 * 直接使用；应改用 height: 100vh 或 height: calc(var(--vh, 1vh) * 100)（需确保 --vh 已正确定义）。
  • 若目标为「左侧垂直菜单」，.mobile-nav 的 bottom: 0; left: 0; 需调整为 top: 0; left: 0; 并设置 width: 80px（窄栏）或 width: 240px（含文字），同时移除 width: 100%。
  • Material Symbols 图标需引入 Google Fonts CDN 或本地字体文件，否则图标将不显示。
  • 推荐为 .nav-link 添加 text-decoration: none 和 color: inherit，避免默认链接样式干扰设计。

  最终效果：菜单纵向贴靠页面左侧，每个导航项包含图标与文字，水平对齐、等距分布，支持悬停反馈与当前页高亮。此方案兼顾语义化 HTML 结构与现代 CSS 布局能力，适用于桌面端侧边导航及移动端抽屉式菜单基础构建。