为什么在缩写形式flex省略时，flex-basis默认为0？

Question

由于flex-basis的初始值为auto，所以我希望该属性默认为auto（如果以这种简写形式省略）：

flex: 2 1;而是默认为0！

原因是什么，为什么它会那样？

Answer 1

由于在flex的简写属性中，当声明flex-grow和（可选）flex-shrink且省略了flex-basis时，flex-basis的定义是，默认为0。

请参阅：

• § 7.1.1. Basic Values of flex
• What is the difference between flex-basis: auto and flex-basis: 0?

Answer 2

tl;dr：根据固定比例轻松调整项目大小。

只有当您的 flex 容器有多个项目时，这个问题才有意义。在这种情况下，为部分甚至全部设置 flex: N 是一种常见的习惯用法。自然的期望是没有此设置的项目保持其大小（因此，flex-grow 的默认值为 0），而其他项目根据 flex-grow 定义的比率调整大小。自然地，我的意思是flex; 1、flex: 2、flex: 1自然对应于1:2:1的比例。如果 flex: N 默认为 flex-basis: auto，则可能违反此期望：

 <div style="width:100px;height:100px;display:flex">
    <div style="width:10%;flex:1;border:1px solid black"></div>
    <div style="flex:1;border:1px solid black"></div>
</div>

不是两个项目平均共享空间，而是一个项目是 55px 宽，另一个是 45px。

这就引出了一个问题：如果您仍然希望 flex 分配宽度，为什么还要设置宽度（如 width: 10%）？我推测这使得它更适合初学者并且更不容易出错。

但是，一旦您了解了 flex-base 的工作原理，我同意它可能会令人困惑（这就是我偶然发现这个问题的方式......）。