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

如果我写一些css属性，比如

边距

，

填充

等等，就像下面这样（用简写）

浏览器将两者解释为0，没有区别

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

为什么它不适用于属性

flex

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

名称：flex
值：无|[| |]

我也提到了，但没有找到任何答案来回答我的疑问/问题

---

请帮助我理解我是否遗漏了一些要点。

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

是三个值中唯一可以解析为长度的值，并相应地执行操作。这是因为规格说明（在该部分的最后）：

前面没有两个弹性系数的无单位零必须解释为弹性系数。为了避免误解或无效声明，作者必须用一个单位指定零组件，或在其前面加两个弹性因子

---

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

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

是三个值中唯一可以解析为长度的值，并相应地执行操作。这是因为规格说明（在该部分的最后）：

前面没有两个弹性系数的无单位零必须解释为弹性系数。为了避免误解或无效声明，作者必须用一个单位指定零组件，或在其前面加两个弹性因子

---

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

这是否意味着

flex:0px1

、

flex:10px1

和

flex:10px1

是一回事？@Gaurav:不是所有三者都是一回事<代码>1 0px 1无效，因为

flex-grow

和

flex-shorn

必须同时出现。您可以在

对之前或之后使用

弹性基础，但不能在它们之间使用。这就是规范中的
[| |]
符号的含义。其他两个确实相当。等一下，我试过flex:10px1

；“它工作得很好。”@Gaurav:嗯，这很奇怪。报告也没有报告任何问题。您正在测试哪个浏览器？在Firefox上，这个属性失败了——正如我所预料的那样。我现在正在查看是否有任何测试可以解释这一点。我正在最新的Chrome上测试它。这是否意味着

flex:0px1

，

flex:10px1

和

flex:10px

是一回事？@Gaurav:不是所有三个<代码>1 0px 1无效，因为

flex-grow

和

flex-shorn

必须同时出现。您可以在

对之前或之后使用

弹性基础，但不能在它们之间使用。这就是规范中的
[| |]
符号的含义。其他两个确实相当。等一下，我试过flex:10px1

；“它工作得很好。”@Gaurav:嗯，这很奇怪。报告也没有报告任何问题。您正在测试哪个浏览器？在Firefox上，这个属性失败了——正如我所预料的那样。我现在正在查看是否有任何测试可以解释这一点。我正在最新的Chrome上测试它。