为什么css属性flex：0 1 1和flex：0px 1 1之间有区别 [英] Why is there a difference between css property flex: 0 1 1 and flex: 0px 1 1

问题描述

如果我写一些css属性，例如 margin ， padding p>

  margin：0 1px 0 1px;和margin：0px 1px 0px 1px 
  

浏览器解释为0无差别

 'property：0'或'property：0px'/ *是相同的东西* / 
  pre> 
 
 
为什么它不适用于属性 flex 的简写？
 名称：flex 
值：none | [<'flex-grow'> <'flex-shrink'> || <'flex-basis'> ] 
  
  演示1 ：使用 flex：0px 1 1 （效果良好） 
 
 
 
  演示2 ：使用 flex：0 1 1 （不起作用） 
 
 
 
我还提到 http://dev.w3.org/csswg/css-flexbox/#flex-property ，但是发现没有什么回答我的怀疑/问题。 
 
 
 
请帮助我理解我是否缺少某一点。
解决方案
接受长度作为值的 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'>组件，或者在它之前指定两个flex因子。
 
 
这也解决了我之前提到的模糊性。
 
If I write some css property like margin, padding etc like below (in shorthand as well)
margin : 0 1px 0 1px; and margin : 0px 1px 0px 1px 
The browser interprets both as 0 making no difference 
'property: 0' or 'property: 0px' /* are same thing */
Why does it not applies for property flex in shorthand?
Name:   flex
Value:  none | [ <‘flex-grow’> <‘flex-shrink’> || <‘flex-basis’> ]
Demo 1 : using flex: 0px 1 1 (works well)

Demo 2 : using flex: 0 1 1 (doesn't works)

I also referred to http://dev.w3.org/csswg/css-flexbox/#flex-property , but found nothing that answers my doubt/issue.  

Please help me understand if I am missing some point.
解决方案
The only component of the flex shorthand that accepts a length as a value is flex-basis.

In the declaration flex: 0px 1 1, you're explicitly assigning one length value: 0px. This will always be assigned to flex-basis. This declaration is equivalent to:
flex-basis: 0px;
flex-grow: 1;
flex-shrink: 1;
The declaration flex: 0 1 1, on the other hand, is ambiguous, because 0 is a possible value of flex-grow. The first two values could potentially be assigned to flex-grow and flex-shrink like so:
flex-grow: 0;
flex-shrink: 1;
But that leaves the last 1 value unitless, which is invalid CSS.

Now, you might ask why the parser couldn't just determine that 0 is the only value among the three that could be parsed into the length and behave accordingly. That is because the spec states (at the very end of that section):

  
A unitless zero that is not already preceded by two flex factors must be interpreted as a flex factor. To avoid misinterpretation or invalid declarations, authors must specify a zero <‘flex-basis’> component with a unit or precede it by two flex factors.
This also resolves the ambiguity I mentioned earlier.

                        
这篇关于为什么css属性flex：0 1 1和flex：0px 1 1之间有区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！