左右固定、中间自适应的flex布局原理是：左右项用flex: 0 0 width禁缩放并设基准宽，中间项用flex: 1（即flex: 1 1 0）以0为基准按权重占满剩余空间；失效主因是width覆盖、父容器无剩余空间或漏设flex-shrink: 0。
左右固定宽度、中间自适应的 flex 实现原理
直接用 flex 实现左右固定、中间撑满，核心不是靠 flex: 0 0 auto 或 flex: 1 单独起作用，而是三者组合后的“弹性行为差异”：左右项放弃伸缩（flex-shrink: 0），中间项主动占满剩余空间（flex: 1）。只要父容器设了 display: flex，且子项没写死 width 覆盖弹性行为，就能稳定生效。
flex: 0 0 200px 和 flex: 1 的分工细节
左右固定项必须显式声明不收缩（否则内容变多时会被压缩），同时限制基础尺寸；中间项用 flex: 1 是最简写法，等价于 flex: 1 1 0 —— 它的基准尺寸是 0，所以能纯粹按比例瓜分剩余空间，不会受自身内容宽度干扰。
- 左侧项：
flex: 0 0 200px→ 不放大、不缩小、基准宽 200px - 右侧项：
flex: 0 0 120px→ 同理，可与左侧不同宽 - 中间项：
flex: 1→ 放大权重 1、可缩小、基准宽 0 → 真正“填空”
常见翻车点：为什么中间没撑开？
多数失效是因为无意中破坏了 flex 的计算前提。以下情况会直接让 flex: 1 失效：
- 中间元素设置了
width（比如width: 100%），覆盖了 flex 基准值 - 父容器没设
width或被min-width: max-content类属性撑开，导致无“剩余空间”可分 - 左右项漏写了
flex-shrink: 0，当窗口窄时被压缩，中间项拿不到预期空间 - 用了
flex: auto或flex: initial代替flex: 0 0 xxx，前者会放大，后者默认flex-shrink: 1
.container {
display: flex;
}
.left {
flex: 0 0 200px;
background: #eee;
}
.main {
flex: 1;
background: #ddd;
}
.right {
flex: 0 0 120px;
background: #ccc;
}
这个结构在任意父容器宽度下都可靠：左右死守尺寸，中间自动吞掉所有缝隙。真正要小心的，是那些看似无关的 CSS 属性——比如给 .main 加个 margin: auto 可能让它居中而不是撑满，加个 white-space: nowrap 又可能让文本溢出却不触发换行。flex 的“自适应”只管空间分配，不管内容渲染逻辑。
立即学习“前端免费学习笔记（深入）”；
