flex: 1 是 flex-grow: 1、flex-shrink: 1、flex-basis: 0 的简写，它从零基准开始按比例分配剩余空间，而非强制占满父宽或依赖内容尺寸。
flex: 1 不是“让中间变宽”的魔法开关，而是告诉浏览器：“从 0 开始，把所有剩余空间都分给我”——前提是左右栏不抢、父容器有空间、子项没设死高度或宽度。
为什么 flex: 1 比 width: 100% 或 flex-grow: 1 更可靠
在 flex 容器里写 width: 100%，等于强行要求中间栏占满整个父容器宽度，左右栏直接被挤出视图或换行；只写 flex-grow: 1 则可能被子元素的 min-width（比如图片、input）卡住，导致不伸展。
flex: 1 是三属性简写：flex-grow: 1 + flex-shrink: 1 + flex-basis: 0。关键就在 flex-basis: 0：它清空了初始宽度锚点，让分配真正从“零起点”开始按比例算。
- IE11 必须显式写全三属性，并加
-ms-flex: 1前缀，否则flex: 1可能解析为 0 宽度 - 如果中间栏里嵌了
img或table，记得给它加min-width: 0，否则 flex 引擎会尊重其隐式最小宽而拒绝收缩 - 不要在中间栏上同时写
flex: 1和width，后者会被忽略，但容易误导后续维护者
左右栏该用 width: 200px 还是 flex: 0 0 200px
必须用 flex: 0 0 200px。它明确锁死两个行为：flex-grow: 0（不放大）、flex-shrink: 0（不缩小），且 flex-basis: 200px 的优先级高于 width，Flex 引擎第一眼就读这个值。
只写 width: 200px 在 Safari 旧版本或极端缩放下可能被压缩——因为 Flex 容器仍会尝试按 flex-shrink 规则重新分配空间，而 width 不参与这个过程。
- 响应式隐藏侧栏时，
display: none后，flex: 1的中间栏自动占满全宽；而仅靠width的写法，有时需额外重置margin才能消除空白 - 若左右栏需不同宽（如左 180px、右 220px），直接改
flex-basis值即可，无需动布局逻辑
移动端 flex: 1 突然不生效？先查这三点
不是 flex: 1 失效，是它没空间可分。常见原因：
- 父容器漏了
display: flex，或被float、position: absolute干扰导致脱离文档流 - 某个祖先元素（比如 body 或 wrapper）高度未设满，例如缺了
min-height: 100vh，导致 flex 计算剩余空间为 0 - 窄屏下三栏总宽（200px + 200px + 中间最小内容宽）超过容器，触发换行——此时
flex: 1作用于单行内，而非整容器，中间栏就只剩一行宽度
解决办法：加 flex-wrap: nowrap 强制单行，再配合 overflow-x: auto 允许横向滚动，比让它换行更可控。
中间栏高度没撑满、列不等高？别乱加 height
默认情况下，align-items: stretch 已让所有子项拉伸到容器最大高度。问题往往出在人为干预：
- 给中间栏加了
height、max-height或align-self: flex-start，直接覆盖了 stretch 行为 - 父容器本身没高度来源，比如没设
min-height: 100vh，或嵌套在未设flex-direction: column的全高布局中 - 中间栏内部用了
display: block的浮动子项，破坏了 flex 子项的拉伸上下文
最简验证方式：临时删掉中间栏所有 height 相关声明，再看是否等高——如果恢复了，说明就是它在干扰。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
