为什么css属性flex：0 1 1和flex：0px 1 1之间存在差异

Question

如果我写一些css属性，如margin，padding等，如下所示（也是速记）

margin : 0 1px 0 1px; and margin : 0px 1px 0px 1px 

浏览器将两者解释为0无差异

'property: 0' or 'property: 0px' /* are same thing */

为什么它不适用于简写属性flex？

Name:   flex
Value:  none | [ <‘flex-grow’> <‘flex-shrink’> || <‘flex-basis’> ]

Demo 1 : using flex: 0px 1 1 (works well)

Demo 2 : using flex: 0 1 1 (doesn't works)

我也提到http://dev.w3.org/csswg/css-flexbox/#flex-property，但没有发现任何可以回答我的疑问/问题。

如果我错过了一些观点，请帮助我理解。

Answer 1

flex简写中唯一接受长度值的组件是flex-basis。

在声明flex: 0px 1 1中，您明确指定了一个长度值：0px。这将始终分配给flex-basis。该声明等同于：

flex-basis: 0px;
flex-grow: 1;
flex-shrink: 1;

另一方面，声明flex: 0 1 1含糊不清，因为0是flex-grow的可能值。可能会将前两个值分配给flex-grow和flex-shrink，如下所示：

flex-grow: 0;
flex-shrink: 1;

但是这使得最后1值无单位，这是无效的CSS。

现在，您可能会问为什么解析器无法确定0是三个中唯一可以解析为长度并且相应行为的值。那是因为规范声明（在该部分的最后）：

  

必须将尚未包含两个弹性因子的无单位零解释为弹性因子。为了避免误解或无效声明，作者必须指定零＆lt;'flex-basis'＆gt;具有单位的组件或在其前面有两个弹性因子。

这也解决了我之前提到的歧义。