用Flex布局实现左右固定、中间自适应，关键是容器设display: flex，左右区域用width或flex: 0 0 auto，中间区域用flex-grow: 1占满剩余空间。
用 Flex 布局实现左右固定、中间自适应，关键是把容器设为 display: flex，左右区域设置固定宽度（或 flex: 0 0 auto），中间区域用 flex-grow: 1 占满剩余空间。
基础 HTML 结构
保持语义清晰，结构简单：
zuojiankuohaophpcndiv class="container"youjiankuohaophpcn
zuojiankuohaophpcndiv class="left"youjiankuohaophpcn左栏zuojiankuohaophpcn/divyoujiankuohaophpcn
zuojiankuohaophpcndiv class="main"youjiankuohaophpcn中间内容（自适应）zuojiankuohaophpcn/divyoujiankuohaophpcn
zuojiankuohaophpcndiv class="right"youjiankuohaophpcn右栏zuojiankuohaophpcn/divyoujiankuohaophpcn
zuojiankuohaophpcn/divyoujiankuohaophpcn核心 CSS 设置
容器启用 Flex，子项按需分配空间：
.container {
display: flex;
}
.left,
.right {
width: 200px; /* 或 flex: 0 0 200px */
flex-shrink: 0; /* 防止被压缩 */
}
.main {
flex-grow: 1; /* 关键：撑开占满剩余宽度 */
min-width: 0; /* 可选：防止内容溢出时破坏布局（尤其含长文本/内联元素） */
}常见注意事项
- 左右栏用 width + flex-shrink: 0 更直观；也可统一用 flex: 0 0 200px（不放大、不缩小、基准宽 200px）
- 中间区域建议加 min-width: 0，避免内部文字或 flex 子项导致容器异常撑宽
- 若中间区域有 padding/margin，不影响 flex-grow 计算，但注意盒模型（推荐用 box-sizing: border-box）
- 不需要设置 flex-basis（如 flex: 1），因为 flex-grow: 1 已足够；flex: 1 等价于 flex: 1 1 0%，但语义不如显式写 flex-grow 清晰
响应式小优化（可选）
在小屏下可改为垂直堆叠：
立即学习“前端免费学习笔记（深入）”；
@media (max-width: 768px) {.container {
flex-direction: column;
}
.left,
.right {
width: auto;
flex: none;
}
.main {
flex-grow: 0;
}
}
