最推荐使用 display: flex 实现布局，父容器必须设 display: flex 且确保宽度来源明确；左侧菜单用 flex: 0 0 240px + box-sizing: border-box；右侧主内容用 flex: 1 + min-height: 0 + overflow-y: auto 实现独立滚动；细节上优先用 gap 控制间距，注意 ie 兼容性与溢出处理。
直接用 display: flex 是最稳妥、最推荐的方式。它语义清晰、响应式友好、无需计算 margin，也规避了浮动清除和绝对定位的维护陷阱。
父容器必须设 display: flex
这是整个布局的前提，缺一不可：
- 给外层容器（比如 .container）加上 display: flex，默认就是水平排列（row）
- 确保父容器有明确宽度来源，比如 width: 100% 或 max-width: 1440px；如果是全屏后台，常用 height: 100vh
- 避免父容器本身被
float、position: absolute或display: inline-block干扰，否则 flex 上下文会失效
左侧菜单用 flex: 0 0 240px
别只写 width: 240px，那在 flex 容器里是不安全的：
- flex: 0 0 240px 明确表示：不放大、不缩小、基准宽度就是 240px
- 配合 box-sizing: border-box，让 padding 和 border 包含在 240px 内，避免意外溢出
- 如果要做响应式收起（如小屏变 60px），直接改 flex 值：
@media (max-width: 768px) { .sidebar { flex: 0 0 60px; } } - 内容超长时加
overflow: hidden; text-overflow: ellipsis; white-space: nowrap防错位
右侧主内容区用 flex: 1 + 高度控制
后台的关键是右侧独立滚动，不能拖动整页：
- 右侧设 flex: 1（等价于
flex-grow: 1; flex-shrink: 1; flex-basis: 0），自动吃掉剩余空间 - 必须加 min-height: 0 或 overflow: hidden，防止默认的
align-items: stretch把它拉满，导致无法内部滚动 - 高度要锁死：父容器设 height: 100vh，右侧再设 overflow-y: auto 和 max-height: 100%
- 避免在右侧内部嵌套使用
height: 100%，容易循环依赖；改用flex-direction: column+flex: 1分配头部/主体/底部更可靠
细节别漏：间隙、溢出、兼容性
这些地方一疏忽，布局就“看起来差不多，但总有点不对劲”：
- 加间距用 gap: 16px（flex 支持），比给子项加 margin 更干净可控
- 右侧若含长英文或 URL，加 word-break: break-word 或 overflow-wrap: break-word 防溢出
- IE10–11 支持 flex，但需旧语法前缀：
-ms-flex: 1；IE9 及以下不支持，需降级为 float 方案 - 左侧固定宽是否含边框/内边距？统一用
box-sizing: border-box就不用反复算 calc()
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
