正如 MDN 网络文档所述：“flex 属性是“flex-grow”、“flex-shrink”、“flex-basis”的简写。
单值语法：值必须是以下之一：
a <number>：在这种情况下，它被解释为 flex: <number> 1 0;
假定“flex-shrink”值为 1，“flex-basis”值为
假定为 0。
Here is an example，它通过在影响媒体查询后将 flex: 50% 和 flex: 100% 放置到子列来控制容器的布局。
很明显，这个 100% 不是用于 flex-growing，而是用作 flex-basis。但这怎么可能呢？如果有单个值，则假定为 flex-grow。
我在这里遗漏了什么吗？是不是因为 % 导致被计算为 flex-basis？
如果您提到the Specification，您可以阅读：
值：none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
|| 表示：
双杠 (||) 分隔两个或多个选项：其中一个或多个选项必须以任意顺序出现。
如果您指定一个百分比值，它显然不是 <'flex-grow'> <'flex-shrink'>? 所以它是 <'flex-basis'>
如果您指定一个数字，则它不能是 <'flex-basis'>，因为它不接受 number，因此它将是 <'flex-grow'> <'flex-shrink'>?，而 ? 表示：
问号 (?) 表示前面的类型、词或组是可选的（出现零次或一次）。
所以是<'flex-grow'>
这里有更多组合：
flex: 1 1 --> <'flex-grow'> <'flex-shrink'>
flex: 1 50%
1 --> <'flex-grow'> <'flex-shrink'>? --> <'flex-grow'>
50% --> <'flex-basis'>