min-width 与 flex-basis 的区别是什么？除适用范围外还有差异吗？

作为刚接触Flex布局的开发者，很容易把这两个属性混淆，除了适用范围（flex-basis仅针对flex子项），二者还有这些关键区别：

• 优先级与约束逻辑不同：flex-basis是flex子项在缩放前的基准尺寸，在主轴尺寸计算中优先级高于width/height，但min-width是最终尺寸的硬性下限。比如设置flex-basis: 100px + min-width: 150px，最终子项主轴尺寸会被min-width约束为150px；反之flex-basis: 200px + min-width: 150px，则以flex-basis的200px为准。

• 对flex缩放的影响不同：flex-grow和flex-shrink的计算是基于容器剩余空间，这个剩余空间等于容器主轴尺寸减去所有子项的flex-basis总和。而min-width不参与这个基准计算，它只是在缩放完成后，确保子项尺寸不会低于设定值。比如多个子项设置flex-grow: 1，flex-basis分别为100px，容器宽度500px，剩余空间是500-300=200px，每个子项会额外分到约66px；但如果其中一个子项加了min-width: 200px，它最终尺寸会是200px，剩余空间会重新分配给其他子项。

• 作用维度随主轴变化的差异：flex-basis始终跟随flex容器的主轴方向——主轴为row时控制宽度，主轴为column时控制高度。而min-width固定作用于宽度维度，和主轴方向无关，哪怕主轴是column，它依然限制子项的最小宽度。

• auto值的含义天差地别：flex-basis设为auto时，会优先采用子项对应主轴方向的width/height值作为基准；如果没设置width/height，则取内容的固有尺寸。而min-width的auto是浏览器默认的最小宽度规则，通常是保证内容不会被压缩到完全不可见（比如单行文本不会被压成0宽度）。

• 内容溢出时的表现不同：当flex-basis小于内容固有尺寸，且flex-shrink允许收缩时，子项会尝试收缩，但如果内容无法换行（比如white-space: nowrap），子项会溢出容器；而如果设置了min-width等于内容固有尺寸，不管flex-shrink怎么设置，子项都不会被收缩到小于这个值，也就不会因为收缩导致内容溢出。

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