flex: 1 能让中间栏自适应是因为它等价于 flex-grow: 1、flex-shrink: 1 和 flex-basis: 0，按比例分配剩余空间，而 width: 100% 会强制占满父容器宽度，破坏三栏并排布局。
为什么 flex: 1 能让中间栏自适应，而不是设 width: 100%
flex: 1 是 flex-grow: 1、flex-shrink: 1 和 flex-basis: 0 的简写，它告诉浏览器：“请把这个元素的宽度按比例分配剩余空间”，而 width: 100% 是“请占满父容器整个宽度”——在 flex 容器里，后者会直接撑满整行，把左右栏挤出视图或触发换行。更关键的是，flex: 1 天然尊重其他子项的 flex-basis 或 width，不会破坏布局流。
左右栏用 width 还是 flex: 0 0 200px
优先用 flex: 0 0 200px：
-
flex: 0 0 200px明确禁止缩放（flex-shrink: 0）和拉伸（flex-grow: 0），且以200px为基准尺寸，内容超长时不会被压缩变形 - 纯
width: 200px在某些旧版 Safari 或极端缩放下可能被 flex 引擎误压缩（尤其当容器总宽略小于 400px + 中间最小宽时） - 如果左右栏需响应式隐藏，
display: none后flex: 1的中间栏会立刻占满全宽；而仅靠width的写法，有时需额外重置margin才能避免空白残留
常见错误：中间栏高度没撑满、列不等高
默认情况下，flex 容器的 align-items: stretch 会让所有子项拉伸到容器最大高度——这正是你想要的“等高列”。但如果中间栏内容少、左右栏内容多，而你又手动给中间栏加了 align-self: flex-start 或 height，就会破坏等高。解决办法很简单：
- 移除中间栏上任何显式的
height、max-height或align-self声明 - 确保父容器有明确高度来源（比如
min-height: 100vh或嵌套在flex-direction: column的全高布局中） - 若需中间栏内部滚动，只对中间栏内的子容器设
overflow-y: auto，不要动外层.center的高度属性
移动端适配时 flex: 1 突然失效？检查这三点
不是 flex: 1 失效，而是容器或祖先节点限制了可用空间：
立即学习“前端免费学习笔记（深入）”；
- 父容器没设
display: flex—— 检查是否漏写了，或被其他 CSS（如float）干扰 - 某个祖先元素有
overflow: hidden且高度未设满，导致 flex 计算剩余空间为 0 - 使用了
flex-wrap: wrap却没控制子项最小宽，三栏在窄屏下被强制换行，flex: 1作用于单行而非整容器
最稳妥的移动端写法是：左右栏加 @media (max-width: 768px) { display: none; }，中间栏保持 flex: 1，无需改写逻辑——这才是 flex 布局真正省心的地方。
