中间栏必须用flex: 1而非flex-grow: 1，因其等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0，可强制从零起点分配剩余空间，绕过图片、长文本等内容最小宽度干扰；左右栏须用flex: 0 0 宽度值锁死，避免窄屏或Safari/IE11下错位坍缩。
直接用 flex: 1 给中间栏，左右栏必须写 flex: 0 0 200px（数值按需替换），否则在 Safari、IE11 或窄屏下极易错位或坍缩。
为什么中间栏不能只写 flex-grow: 1
浏览器会先按内容最小宽度（min-content）计算基准：图片、长英文、未设 white-space 的文本都会把中间栏撑宽，导致溢出或布局断裂。而 flex: 1 等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0，关键在 flex-basis: 0——它强制从零开始分配剩余空间，彻底绕过内容干扰。
常见错误现象：
- 中间栏在 iOS Safari 15.4 以下突然变窄甚至塌成一条线
- 插入一张未设
max-width: 100%的图片后，整行换行或横向滚动 - 写了
width: 100%或max-width: 100%，反而让flex行为不可预测
左右栏必须用 flex: 0 0 200px，不是 width: 200px
width 在 Flex 容器里只是“初始提示”，不是约束。当容器总宽不足（比如高 DPI 屏像素舍入、缩放 110%、Safari iOS 15.4 以下）时，Flex 引擎仍可能压缩它，造成左右栏变窄、间隙错乱。
flex: 0 0 200px 才真正锁死：不放大、不缩小、基准就是 200px。
- 左右栏宽度可不同，例如左栏
flex: 0 0 240px，右栏flex: 0 0 160px - 若需响应式隐藏某侧栏，用
display: none即可，flex: 1的中间栏会立刻占满全宽；仅靠width的写法常需额外重置margin清空白 - IE11 必须补
-ms-flex: 1，否则中间栏可能塌缩为 0
父容器和子项的隐性陷阱
Flex 布局失效，八成是父容器高度链断了或子项默认行为被忽略：
- 父容器需有明确宽度（如
width: 100%或继承自 body），且不能设overflow: hidden截断子项 - 中间栏若含文字或内联元素，务必加
min-width: 0，否则min-width: auto（默认值）会让内容宽度成为最小限制，破坏弹性 - 避免给子项设
float、position: absolute或display: inline-block，它们会脱离 Flex 流程 - 不用
justify-content: space-between来“撑开”三栏——它只影响主轴剩余空间分配，不解决尺寸锁定问题；真要留间隙，用gap（现代浏览器）或子项margin
最易被忽略的点是 min-width: 0 和 flex-basis: 0 的组合效果：前者防内容撑破，后者防内容干扰分配，两者缺一不可。实际项目中，哪怕只漏掉一个，都可能在某个 Safari 版本或某种缩放比例下突然崩掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
