Why is there a difference between css property flex: 0 1 1 and flex: 0px 1 1

Question

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.

Answer 1

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.