Что достигается в единицах по первому значению при использовании сокращения "flex"?

Question

Документация о сокращенном обозначении flex на 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;

Я вижу и редактирую эти значения в веб-инспекторе и вижу, что они отображают разные значения в браузере; но не совсем ясно, какой именно эффект это имеет.

Поскольку это синтаксис с тремя значениями, первое значение следует интерпретировать как flex-grow, но это свойство ожидает число без единицы.

Как процент применяется в таком случае? И это где-то определено?

Answer 1

Сокращение

flex: 30% 0 0;

эквивалентно

flex: 0 0 30%;

, где первый 0 - это , второй 0 - , а 30% - . До тех пор, пока каждое из трех значений компонента соответствует 1: 1 уникальному длинному свойству, не имеет значения, в каких значениях порядка появляются различные единицы измерения. Конечно, при двух значениях без единиц измерения первое всегда соответствует а второй .

Это задокументировано в грамматике сокращения flex:

нет | [<‘Flex-grow’> <‘flex-shrink’>? || <‘Flex-based’>]

|| «разделяет две или более опций: одна или несколько из них должны встречаться в любом порядке», как описано в css-values-3 .