中间项变形的根本原因是未阻止其参与flex基础尺寸计算，应设flex: 0 0 300px锁定基准，左右项用flex: 1，容器需有明确宽度，且IE11中需拆写并加min-width兜底。
flex-grow:1 两边撑开后中间被挤变形？
中间设了 width: 300px 却还是缩放或溢出，根本原因是没阻止中间项参与 flex 基础尺寸计算。Flex 容器默认对所有子项执行 flex-basis: auto，此时即使写了 width，也会被 flex-grow 和内容尺寸干扰。
正确做法是显式锁定中间项的 flex 基准：
- 中间项必须设
flex: 0 0 300px（等价于flex-grow: 0; flex-shrink: 0; flex-basis: 300px） - 两边项用
flex: 1或flex-grow: 1即可，无需指定flex-basis - 容器必须有明确宽度（比如
width: 100%或固定值），否则 flex 行为不可控
为什么不用 margin 或 absolute 模拟？
纯 CSS 布局中，margin: 0 auto 只能居中单个块，无法让左右两块“自动填满剩余空间”；position: absolute 则脱离文档流，响应式时极易错位，且无法与父容器内其他元素自然流式排列。
Flex 方案的优势在于：
立即学习“前端免费学习笔记（深入）”；
- 三栏始终在同一行，无换行风险
- 左右栏宽度随容器动态变化，不依赖 JS 计算
- 中间项严格保持 300px，哪怕内容超长也不会拉伸（前提是设了
flex-shrink: 0）
实际代码里漏掉的关键样式
常见错误是只写 flex-grow: 1 却忘了重置 flex-shrink 和 flex-basis，导致小屏下中间栏被压缩。完整最小可行结构如下：
.container {
display: flex;
}
.left, .right {
flex: 1;
}
.center {
flex: 0 0 300px;
}
注意：.center 的 flex-shrink: 0 不可省——否则当容器总宽小于 300px + 左右最小内容宽 时，浏览器会强制压缩中间项。
IE11 兼容性要注意什么？
IE11 对 flex: 0 0 300px 支持不稳定，尤其在嵌套 flex 容器中容易失效。稳妥方案是拆开写：
- 中间项用
flex-grow: 0; flex-shrink: 0; flex-basis: 300px; - 避免在 IE11 中混用
width和flex-basis（优先用后者） - 如果项目必须支持 IE11，建议加
min-width: 300px作为兜底
真正难处理的不是写法本身，而是当左右栏里有图片、表单或第三方组件时，它们自带的 min-width 或 white-space 会偷偷破坏 flex 分配逻辑——这时候得逐个检查子元素的盒模型行为。
