Css flex速记如何处理以百分比表示的单个值？

这句话的语法是：

单值语法：该值必须是以下值之一：

• 无单位的
  ：然后它被解释为

• 宽度的有效值：然后将其解释为

• 关键字值之一

  none

  、

  auto

  或

  initial

第二个项目符号表示

flex:20%相当于
弹性基准：20%
，因为
20%
是
宽度的有效值

然而，实际情况并非如此：



.container{
显示器：flex；
}
.container>div{
填充：6px；
}
.一{
背景#fcc9e5；
弹性：20%；
}
.二{
背景:#ecaef9；
弹性：1；
}

一
二
表示，在
flex
速记声明中，当省略
和
时，它们都默认为1。（默认值为0。）

这意味着速记声明
flex:20%
相当于
flex:120%

仅指定
flex-basis:20%
将
flex-grow
和
flex-short
分别保留其初始值0和1，使该直接声明本身相当于速记
flex:0 1 20%

flex速记如何处理以百分比表示的单个值

很简单。像这样：


flex:20%

相当于：


flex-grow:1
flex-shrink:1
弹性基准：20%

MDN的人显然误解了，这实际上有点令人困惑

一方面，规范指出
flex
的初始值是
flex:01 auto


但是如果您阅读下面的文本，它会说（），省略时，
flex grow
的值是
1


所以，在您的第一个示例中，
flex:20%
相当于：


flex-grow:1
flex-shrink:1
弹性基准：20%


在第二个示例中，
flex-basis:20%
相当于：


flex-grow:0
（初始值）
弹性收缩：1
（初始值）
弹性基准：20%


顺便说一下，这正是flexbox规范提出此建议的原因：

鼓励作者使用
flex
速记来控制灵活性，而不是直接使用其速记属性，因为速记可以正确地重置任何未指定的组件以适应。


我不确定MDN是否正确。或者规格不正确。或者规范只是让人困惑，因为定义表和规范中的定义文本之间存在明显的矛盾。@Michael_B：没有矛盾；语句“省略时，设置为1.”出现在flex速记部分，因此仅在指定flex速记时适用（缺少flex增长因子）。未指定flex速记时，flex grow保留其初始值0。@Michael_B:这也意味着
flex:20%；flex-grow:initial
（按该顺序）将通过正常的级联解析导致flex-grow为0，类似地，对于
flex:20%
，在不太具体的规则中，以及
flex-grow:initial
在单独但更具体的规则中。规范称
flex
的初始值为
01 auto
。这意味着如果省略
flex grow
，其值将为
0
。但是，同一定义后来指出，如果省略了
flex grow
，则其值为
1
。我认为这有点令人困惑。它还与其他属性的初始值定义模式相冲突。@Michael_B:以这种方式指定初始值的原因是flex是一个速记属性。如果它只指定初始值为auto，它将扩展为1 auto，如规范性文本所述。第7.1.1节中提到了这一点（该节提供了信息，但与规范性文本完全一致）。