flex-grow按权重分配剩余空间，flex-shrink按flex-basis与系数乘积比例压缩溢出空间；二者均依赖flex-basis，且与内容尺寸、内外边距耦合紧密。

flex-grow 是怎么分配剩余空间的

flex-grow 控制的是容器中**有剩余空间时**，项目按比例“多占多少”。它不是固定像素值，而是权重系数。比如两个子项分别设 flex-grow: 1 和 flex-grow: 2，剩余空间会被切成三份，前者拿 1 份，后者拿 2 份。

注意：它只在主轴方向起作用，且前提是容器主轴有“空余”，也就是所有子项原始尺寸之和小于容器宽度（或高度）。

• flex-grow 默认值是 0，即不伸展
• 设为 0 时，即使有剩余空间也不参与分配
• 设为非零值但其他项目 flex-basis 很大，也可能导致实际伸展量极小（因为先减去 flex-basis 才算剩余）
• 负值非法，会被忽略

flex-shrink 怎么压缩超出内容

flex-shrink 控制的是当子项**总尺寸超过容器**时，各项目按比例“缩多少”。它的计算逻辑比 flex-grow 更隐蔽：缩放量 = （自身 flex-basis × flex-shrink） / 所有项目该乘积之和 × 超出总量。

也就是说，flex-shrink 不是线性缩放比例，还受 flex-basis 影响。一个 flex-basis: 200px; flex-shrink: 2 的项目，比 flex-basis: 100px; flex-shrink: 2 的项目缩得更多。

• flex-shrink 默认值是 1，即默认可压缩
• 设为 0 可阻止该项目被压缩（常用于固定宽度导航栏项）
• 设为 0 但其他项目 flex-shrink 很大，可能导致溢出容器且不折行
• 负值同样非法

flex-grow 和 flex-shrink 同时生效的典型陷阱

很多人以为 flex: 1 就是“自动填满并可压缩”，其实它等价于 flex: 1 1 0 —— flex-basis: 0。这意味着所有项目从 0 宽度开始，再按 flex-grow 分配空间。这在文字内容少时没问题，但若某项目含长单词或固定宽元素（如图片），可能因 flex-basis: 0 导致换行异常或内容挤压。

更稳妥的写法是显式指定 flex-basis：

flex: 1 1 auto;   /* 内容宽度为基准，再伸缩 */
flex: 1 0 auto;   /* 可伸展，但禁止压缩（适合文本容器）*/
flex: 0 0 200px;  /* 完全不伸缩，固定 200px */

• 别依赖 flex: 1 处理含内联块、图片或长英文单词的布局
• flex-shrink: 0 配合 white-space: nowrap 容易造成横向滚动，需加 overflow: hidden 或约束父容器
• 使用 min-width: 0 或 min-height: 0 可防止 flex 项目因内容过长而撑开（尤其在嵌套 flex 中）

浏览器兼容性与 flex-basis 的隐式行为

IE10–11 对 flex-basis 的解析存在 bug：当设为 auto 时，可能无视内容尺寸，退回到 0；设为具体值（如 200px）才可靠。这也是为什么老项目常用 flex: 0 0 200px 而非 flex: 0 0 auto。

Chrome/Firefox/Safari 现代版本对 flex-basis: auto 支持良好，但只要项目里有 width 或 height，flex-basis 就会优先取该值（除非显式覆盖）。

• 不要混用 width 和 flex-basis 且不统一单位（比如 width: 100% + flex-basis: 200px）
• 调试时用浏览器 devtools 查看 computed 样式里的 flex-basis 实际值，比看声明更准
• flex-shrink 在 Safari 旧版中偶有计算偏差，建议用整数（避免小数如 0.5）

flex-grow 和 flex-shrink 看似简单，真正难的是它们和 flex-basis、内容尺寸、内外边距之间的耦合关系——多数布局问题根源不在伸缩系数本身，而在初始尺寸没控住。