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、内容尺寸、内外边距之间的耦合关系——多数布局问题根源不在伸缩系数本身，而在初始尺寸没控住。
