Missing values in shorthand property

css, flexbox, html, language-lawyer

Solution

The Flexible Box Layout Module specification defines how the shorthand property should be handled in its The 'flex' Shorthand section:

 Value: none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]

Using the CSS Values and Units specificaiton (which defines what the `|`, `?` and `||` symbols in the above statement mean, we can see that the value should either:

- Be `none`

- Be `<flex grow>` (and optionally `<flex-shrink>`) and/or `<flex-basis>` in that order.

This means that your example of:

flex: 1 100%;

Translates to:

flex-grow: 1;
flex-shrink: initial;
flex-basis: 100%;

Because `100%` is not a valid value for `<flex-shrink>`

If, however, the example was instead:

flex: 1 0;

Where `0` is a valid value for both `<flex-shrink>` and `<flex-basis>`, this would translate to:

flex-grow: 1;
flex-shrink: 0;
flex-basis: initial;

Problem

Quoting CSS 2.2 Spec: When values are omitted from a shorthand form, each "missing" property is assigned its initial value (see the section on the cascade). But how do browsers know which value matches which property? For example, the following code is taken from A Complete Guide to Flexbox: ``` .header, .main, .nav, .aside, .footer { flex: 1 100%; } ``` What does this mean? Is it equivalent to ``` .header, .main, .nav, .aside, .footer { flex-grow: 1; flex-shrink: initial; flex-basis: 100%; } ``` or ``` .header, .main, .nav, .aside, .footer { flex-grow: 1; flex-shrink: 100%; flex-basis: initial; } ``` or something else?

Original source