在速记属性中缺少值

Question

引用CSS 2.2 Spec：

  

当从简写形式中省略值时，每个“缺失”属性   被赋予其初始值（参见the cascade）部分。

但是浏览器如何知道哪个值匹配哪个属性？例如，以下代码取自A Complete Guide to Flexbox：

.header, .main, .nav, .aside, .footer {
  flex: 1 100%;
}

这是什么意思？它等同于

.header, .main, .nav, .aside, .footer {
  flex-grow: 1;
  flex-shrink: initial;
  flex-basis: 100%;
}

或

.header, .main, .nav, .aside, .footer {
  flex-grow: 1;
  flex-shrink: 100%;
  flex-basis: initial;
}

或其他什么？

Answer 1

Flexible Box Layout Module规范定义了如何在The 'flex' Shorthand section中处理速记属性：

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

使用CSS Values and Units specificaiton（定义上述语句中|，?和||符号的含义，我们可以看到该值应该是：

1. Be none
2. 按此顺序<flex grow>（以及可选<flex-shrink>）和/或<flex-basis>。

这意味着你的例子：

flex: 1 100%;

转换为：

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

因为100%不是<flex-shrink>

的有效值

但是，如果是这样的例子：

flex: 1 0;

0是<flex-shrink>和<flex-basis>的有效值，这将转化为：

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

Answer 2

值的位置决定了为其设置的属性。就像PHP中function()的参数一样。

如果您想跳过后面的属性，它们将被设置为普通/自动。但是，如果您希望跳过中间位置的属性值，可以尝试将其设置为auto/inherit。但是在CSS中如果你想从速记中跳过一个属性，那么到目前为止唯一合适的方法就是使用完整形式的属性。