结论：用 display: flex 是当前最稳妥、可维护性最强的方案，尤其适合后台管理这种需要固定侧边栏 + 自适应主内容区的场景；它避免了 float 坍塌、margin 硬编码同步难、响应式过渡生硬等问题，配合 width 固定侧边栏与 flex: 1 主内容区，能稳定实现高度自适应与折叠动画。
display: flex 是当前最稳妥、可维护性最强的方案**，尤其适合后台管理这种需要固定侧边栏 + 自适应主内容区的场景。其他方法要么兼容性差（如 grid 在旧版 Electron 或 IE11 环境里仍需谨慎），要么容易出布局坍塌或文字重叠（如浮动未清空）。
为什么不用 float + margin-left？
这是老项目里最常见写法，但实际踩坑率高：margin-left 值必须硬编码（比如 250px），一旦侧边栏宽度动态变化（比如折叠/展开），就得同步改多个地方；更麻烦的是，当右侧内容高度不足时，float 会引发父容器高度坍塌，靠 overflow: hidden 强制触发 BFC 又可能意外裁剪子元素的 position: absolute 内容。
- 侧边栏宽度改了，
.main{ margin-left: 250px }必须手动同步修改 - 右侧内容若含
position: absolute元素，overflow: hidden会把它截掉 - 无法响应式收缩——比如移动端想把侧边栏收起，
float+margin很难平滑过渡
display: flex 的正确写法
关键不是只写 display: flex，而是要明确主次容器的尺寸行为：
- 侧边栏用固定宽度（如
width: 240px），不设flex，让它“钉死” - 主内容区用
flex: 1（等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0%），它会自动撑满剩余空间 - 容器必须有明确高度（比如
height: 100vh或继承自 body），否则flex不会按预期分配高度
示例代码片段：
.layout {
display: flex;
height: 100vh;
}
.sidebar {
width: 240px;
background: #1a1f2e;
}
.main {
flex: 1;
overflow-y: auto;
}
折叠侧边栏时怎么避免主内容区跳动？
很多人直接 display: none 侧边栏，结果主内容区瞬间拉满全屏，视觉上“弹一下”。更稳的做法是用 width + min-width 控制收缩状态：
- 折叠时设
.sidebar { width: 60px; min-width: 60px; }，保留图标区域 - 同时给
.main加transition: margin-left 0.3s ease（如果用 margin 方案）或直接依赖 flex 自动重排（推荐） - 注意：不要对
flex容器本身做transform: translateX()动画，会导致子元素渲染异常
flex 布局至少让你在 DOM 结构不变的前提下，只改几个 class 就能切换布局形态。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
