在速记属性中缺少值

Question

引用CSS 2.2规范:

当从简写形式中省略值时,将为每个"missing"属性分配其初始值(请参阅级联部分).

但是浏览器如何知道哪个值匹配哪个属性？例如,以下代码取自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规范定义了如何在'flex'速记部分中处理速记属性:

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

使用CSS Values和Units specificaiton(定义上述语句中的和|,?以及||符号的含义,我们可以看到该值应该是:

1. 是 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;