当使用"flex"速记时,第一个值的单位完成了什么？

Question

关于MDN的弹性简写的文档说:

单值语法:值必须是以下之一:

a unitless <number>: then it is interpreted as <flex-grow>.
a valid value for width: then it is interpreted as <flex-basis>.
one of the keyword values none, auto, or initial.

双值语法:第一个值必须是无单位的,并且它被解释为.第二个值必须是以下之一:

a unitless <number>: then it is interpreted as <flex-shrink>.
a valid value for width: then it is interpreted as <flex-basis>.

三值语法:

the first value must be a unitless <number> and it is interpreted as <flex-grow>.
the second value must be a unitless <number> and it is interpreted as <flex-shrink>.
the third value must be a valid value for width and is interpreted as <flex-basis>.

但我在很多地方都看到过这样的速记:

flex: 30% 0 0;

我可以在Web检查器上查看和编辑这些值,并看到它们在浏览器中呈现不同的值; 但并没有明确地清楚它有什么效果.

由于它是三值语法,因此第一个值应解释为flex-grow,但该属性需要无单位数.

如何在这样的情况下应用百分比？这是在某个地方定义的吗？

Answer 1

速记

flex: 30% 0 0;

相当于

flex: 0 0 30%;

其中第一个0是<flex-grow>,第二个0是<flex-shrink>,30%是<flex-basis>.只要三个组件值中的每一个对应于1:1到唯一的手写属性,就会出现具有不同单位的订单值无关紧要.当然,给定两个无单位值,第一个始终对应于<flex-grow >和第二个<flex-shrink>.

这在flex速记的语法中有记载:

没有| [<'flex-grow'> <'flex-shrink'>？|| <'flex-basis'>]

|| "将两个或多个选项分开:它们中的一个或多个必须以任何顺序出现",如css-values-3中所述.