本文介绍如何通过 css flexbox 将水平导航栏重构为垂直侧边栏，使其固定于页面左侧，同时确保主内容区域正确占据右侧空间，避免内容被遮挡或错位。
本文介绍如何通过 css flexbox 将水平导航栏重构为垂直侧边栏，使其固定于页面左侧，同时确保主内容区域正确占据右侧空间，避免内容被遮挡或错位。
要将导航栏从顶部水平布局转变为左侧垂直布局（即常见的“侧边导航栏”），关键在于改变容器的布局方向并明确尺寸与定位关系，而非依赖浮动（float）或行内块（inline-block）等过时方案。原代码中 .navbar ul 使用 display: flex 但默认为 flex-direction: row，导致菜单项横向排列；只需将其改为 column，再配合显式宽度控制和整体页面布局隔离，即可达成目标效果。
✅ 核心修改要点
为 .navbar 设置固定宽度与左对齐定位
添加 width: 200px（可根据需求调整），并建议添加 flex-shrink: 0 防止在弹性容器中被压缩。将导航列表设为垂直堆叠
在 .navbar ul 中加入 flex-direction: column，使 <li> 元素纵向排列；同时移除 justify-content: space-evenly 的横向分布逻辑（它在垂直方向仍有效，但需注意首尾间距是否合理）。配合页面级布局容器（推荐）
原始 HTML 仅包含 <nav>，未定义其与主内容的关系。最佳实践是将 <nav> 和主内容区共同包裹在一个 display: flex 的父容器中：
<div class="layout-container">
<nav role="navigation" class="navbar">
<ul>
<a href="{{ url_for('index') }}"><li>Tools</li></a>
<a href="{{ url_for('certification') }}"><li>Certification</li></a>
<li><a href="#">Application1</a>
<ul class="dropdown">
<a href="{{ url_for('accessing') }}"><li>Access</li></a>
<a href="{{ url_for('loading_maintenance') }}"><li>Maintenance</li></a>
<a href="{{ url_for('summary') }}"><li>Summary</li></a>
<a href="{{ url_for('loading_report') }}"><li>Report</li></a>
</ul>
</li>
<li class="disabled">Application2</li>
<a href="{{ url_for('application3') }}"><li>Application3</li></a>
</ul>
</nav>
<!-- 主内容区域：自动填充剩余空间 -->
<main class="main-content">
<h1>Welcome to Your Dashboard</h1>
<p>This content appears beside the sidebar, not below it.</p>
</main>
</div>对应新增的 CSS：
.layout-container {
display: flex;
min-height: 100vh; /* 确保占满视口高度 */
}
.navbar {
width: 200px;
flex-shrink: 0; /* 防止被压缩 */
height: 100vh; /* 可选：使侧边栏等高 */
overflow-y: auto; /* 内容超长时启用滚动 */
}
.main-content {
flex: 1; /* 自动占据剩余宽度 */
padding: 1.5rem;
background-color: #f9f9f9;
}⚠️ 注意事项与优化建议
-
语义化与可访问性：当前 HTML 中 <a> 直接包裹 <li> 不符合 HTML5 规范（<li> 应为 <ul> 的直接子元素，链接应置于 <li> 内）。建议修正结构：
<li><a href="{{ url_for('index') }}">Tools</a></li>同时为下拉菜单项添加 aria-haspopup="true" 和 aria-expanded 属性以提升屏幕阅读器支持。
-
下拉菜单定位修复：原 .dropdown 使用 position: absolute，在垂直侧边栏中需确保其相对于父 <li> 正确定位。建议为父 <li> 添加 position: relative：
.navbar li { position: relative; /* 关键：使绝对定位的下拉菜单以此为参考 */ } -
响应式考虑：在小屏幕上可结合媒体查询隐藏侧边栏，改用汉堡菜单 + 抽屉式展开：
@media (max-width: 768px) { .navbar { width: 0; overflow: hidden; opacity: 0; transition: all 0.3s ease; } .navbar.active { width: 240px; opacity: 1; } }
✅ 最终效果验证
完成上述修改后，导航栏将稳定固定于页面左侧，宽度恒定、菜单垂直排列，所有下拉子菜单向右展开；主内容区域自动伸展至右侧可用空间，滚动行为独立，互不干扰——完全匹配预期设计图（如 https://www.php.cn/link/5c6ccef01fc04bcec1297ec5a752c9ad 所示）。
掌握这一模式，不仅解决了当前布局问题，也为构建企业级管理后台、仪表盘等多区域应用界面打下坚实基础。
