关于flex-basis:0%的行为逻辑疑问及原理求证

一、关于 flex-basis: auto 的理解纠正 #

你之前的部分描述存在偏差：

• flex-basis: auto 时，项目的初始尺寸并非严格的 min-content，而是项目自身内容的固有占用宽度（比如项目内是固定宽度的图片，初始宽度就是图片宽度；如果是文本，初始宽度是文本在容器允许下的自然换行宽度）。
• flex-grow 分配额外空间的逻辑：当多个项目的 flex-grow 数值相同时，确实会均分额外空间；但如果数值不同，会按比例分配。比如三个项目 flex-grow 分别为 1、2、1，额外空间共 100px，那么第一个项目分 25px，第二个分 50px，第三个分 25px。
• flex-shrink 收缩空间的逻辑：你说的“各减一份”是错误的，默认情况下，收缩量是按项目 flex-basis 的占比来分配的，而非均分。举个数学例子：
  假设父容器宽度 200px，三个项目 flex:1 1 auto，初始宽度分别为 93px、93px、83px，总初始宽度 269px，超出父容器 69px。
  每个项目的收缩比例 = 自身初始宽度 / 总初始宽度：
  • 前两个项目收缩量：69px * (93/269) ≈ 23.7px，最终宽度 93 - 23.7 ≈ 69.3px
  • 第三个项目收缩量：69px * (83/269) ≈ 21.6px，最终宽度 83 - 21.6 ≈ 61.4px

二、关于 flex-basis: 0% 的情况说明 #

1. 当 flex-grow 均为 1 时，确实会将父容器的可用宽度（即父容器宽度减去自身 padding、border 后的空间）三等分分配给每个项目。比如父容器宽度 300px，无内边距和边框，三个项目设置 flex:1 1 0%，每个项目最终宽度都是 100px。
2. 关于 flex-grow 或 flex-shrink 设为 0 的情况：
   • 若 flex-grow:0，且父容器空间足够：项目宽度会等于 flex-basis 定义的值。比如设置 flex:0 1 150px，父容器宽度 300px，项目宽度就是 150px。
   • 若 flex-shrink:0，且父容器空间不足：项目会保持 flex-basis 定义的宽度，直接溢出父容器。比如设置 flex:1 0 200px，父容器宽度 150px，项目宽度还是 200px，超出父容器 50px。

内容的提问来源于stack exchange，提问作者Twinkle