答案：通过flex布局与position结合实现侧边栏固定，一种用position:fixed使侧边栏始终可见，内容区自适应；另一种用flex固定侧边栏宽度，整体滚动。两种方式分别适用于需固定定位或仅需宽度固定的场景，配合响应式设计提升用户体验。
实现侧边栏固定效果，可以通过 position 和 flex 布局结合使用，既能保证布局的灵活性，又能实现侧边栏宽度固定、内容区域自适应的效果。下面介绍两种常见且实用的实现方式。
1. 使用 Flex 布局主结构 + Position 固定侧边栏元素
将整体页面结构用 Flex 布局划分区域，再对侧边栏使用 position: fixed 实现固定定位，避免滚动时侧边栏移动。
适用场景：侧边栏始终固定在屏幕左侧，内容区随滚动而动。HTML 结构：
<div class="layout"> <aside class="sidebar">侧边栏</aside> <main class="content">内容区域</main> </div>
CSS 样式：
立即学习“前端免费学习笔记（深入）”；
.layout {
display: flex;
min-height: 100vh;
}
<p>.sidebar {
width: 200px;
background: #333;
color: white;
position: fixed; /<em> 固定定位 </em>/
top: 0;
left: 0;
height: 100vh;
z-index: 100;
}</p><p>.content {
flex: 1;
margin-left: 200px; /<em> 避开侧边栏宽度 </em>/
padding: 20px;
background: #f4f4f4;
}</p>说明：侧边栏使用 position: fixed 锁定位置，不会随页面滚动；主内容通过 margin-left 留出空间，配合 flex 自适应剩余宽度。
2. Flex 布局内部嵌套 + 固定宽度侧边栏
不使用 fixed，而是让侧边栏在 flex 容器中保持固定宽度，内容区自动填充，同时整个布局可滚动。
适用场景：侧边栏与内容一起滚动，但宽度始终保持不变。CSS 样式（无 position fixed）：
.layout {
display: flex;
min-height: 100vh;
}
<p>.sidebar {
width: 200px; /<em> 固定宽度 </em>/
background: #333;
color: white;
flex-shrink: 0; /<em> 禁止压缩 </em>/
}</p><p>.content {
flex: 1; /<em> 自动填充剩余空间 </em>/
padding: 20px;
background: #fff;
}</p>这种方式更简洁，适合不需要“永远固定在屏幕上”的场景。若希望侧边栏部分内容固定（如内部导航），可在其内部使用 position: sticky 或 fixed 微调。
灵活搭配建议
- 需要侧边栏始终可见（如后台管理系统），优先使用 position: fixed + margin 偏移。
- 希望布局简单、响应式友好，可用纯 Flex 固定宽度 + 弹性主体。
- 结合媒体查询，在小屏下隐藏或改为抽屉式菜单，提升体验。
- 使用 calc() 动态计算宽度时，注意 fixed 元素脱离文档流的影响。
基本上就这些。position 与 flex 各有优势，结合使用能精准控制布局与行为，实现既美观又实用的固定侧边栏效果。关键在于明确需求：是视觉上固定不动，还是结构上宽度不变。根据不同场景选择合适方案即可。
