为什么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’> ]

我还提到了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是三个中唯一可以解析为长度并相应行为的值.那是因为规范声明(在该部分的最后):

尚未在两个弹性因子之前的无单位零必须被解释为弹性因子.为避免误解或无效声明,作者必须使用单位指定零<'flex-basis'>组件,或者在其前面加上两个弹性因子.

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