css - flex 速记如何处理以百分比表示的单个值？

Question

Mozilla Developer Network flex article说到它的语法:

One-value syntax: the value must be one of:

• 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.

第二个元素符号表示 flex: 20%;相当于flex-basis: 20%; , 作为 20%是 width 的有效值.

然而，实际情况并非如此:

1. flex shorthand

.container {
  display: flex;
}

.container>div {
  padding: 6px;
}

.one {
  background: #fcc9e5;
  flex: 20%;
}

.two {
  background: #ecaef9;
  flex: 1;
}

<div class="container">
  <div class="one">one</div>
  <div class="two">two</div>
</div>

1. flex-basis

.container {
  display: flex;
}

.container>div {
  padding: 6px;
}

.one {
  background: #fcc9e5;
  flex-basis: 20%;
}

.two {
  background: #ecaef9;
  flex: 1;
}

<div class="container">
  <div class="one">one</div>
  <div class="two">two</div>
</div>

那么，这里发生了什么？

Answer 1

spec说，在 flex速记声明，当<flex-grow>和 <flex-shrink>被省略，它们都默认为 1。(MDN incorrectly states 即 <flex-grow> 默认为 0。)

这意味着速记声明flex: 20%相当于flex: 1 1 20% .

仅指定 flex-basis: 20%叶子 flex-grow和 flex-shrink它们的初始值分别为 0 和 1，使普通声明本身等同于简写 flex: 0 1 20% .