中间栏必须用 flex: 1 而非 flex-grow: 1，因其等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0，可绕过内容最小宽度干扰；左右栏须用 flex: 0 0 宽度值锁死；父容器需确保高度链完整且无 overflow: hidden 截断。
中间栏必须用 flex: 1，不是 flex-grow: 1
只写 flex-grow: 1 很容易失效，尤其当中间栏里有图片、input、长英文或未设 white-space 的文本时。浏览器会按内容最小宽度（min-content）先计算基准，再分配增长空间，结果就是中间栏被撑宽甚至溢出。
flex: 1 等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0，关键在 flex-basis: 0——它强制从 0 宽度起点开始分配剩余空间，彻底绕过内容尺寸干扰。
- 写了
width: 100%或max-width: 100%会和flex: 1冲突，后者逻辑仍生效但行为不可预测 - IE11 必须补
-ms-flex: 1，否则中间栏可能塌缩为 0 -
flex-grow: 2不是“让中间更宽”的解法；它只在左右栏也参与弹性分配（即没锁死flex-shrink）时才起作用，而这通常不是你想要的
左右栏必须用 flex: 0 0 200px，不能只写 width
纯 width: 200px 在 Flex 容器里只是“初始提示”，不是约束。当容器总宽不足（比如窄屏缩放、Safari iOS 15.4 以下、高 DPI 屏像素舍入）时，Flex 引擎仍可能压缩它，导致布局错位。
flex: 0 0 200px 才真正锁死：不放大、不缩小、基准就是 200px。左右栏宽度可不同，比如左栏 flex: 0 0 240px，右栏 flex: 0 0 160px，完全没问题。
- 如果左右栏需响应式隐藏，用
display: none后，flex: 1的中间栏会立刻占满全宽；而仅靠width的写法，常需额外重置margin才能清空白 - 别给左右栏加
flex-grow: 1或flex: 1，否则它们会抢中间栏的空间
父容器必须设 display: flex，且高度链不能断
很多“中间栏没撑开”“等高失效”“移动端变单行”问题，根源不在子项，而在父容器配置断链。
- 父容器没设
min-height: 100vh或嵌套在flex-direction: column的全高结构中，flex: 1就没空间可分 - 某个祖先元素有
overflow: hidden且高度未设满，Flex 计算出的“剩余空间”为 0 - 用了
flex-wrap: wrap却没配媒体查询，窄屏下三栏换行，flex: 1只在单行内生效，中间栏看起来“失效”了
小屏堆叠时必须重置 flex 值，不能只靠 flex-direction: column
只改 flex-direction: column，三栏仍保留原有 flex 值，结果是每栏高度不一致、内容溢出或留白过大。
必须在媒体查询里把三栏都设为 flex: 0 0 100%（或 flex: none），确保每栏独占一行。同时检查 padding 和 gap 是否叠加造成过度留白。
- 漏掉
box-sizing: border-box是高频错误：没它，padding和border会让实际宽度超 100%，小屏堆叠时可能换行错乱 -
gap比手动写margin更可靠，避免 margin 折叠；可用gap: clamp(8px, 1vw, 16px)动态控制间距
flex-basis、flex-shrink 和 box-sizing 的交互关系有真实调试经验，而不是复制粘贴完就以为搞定了。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
