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

Question

在Mozilla开发者网络flex文章说,它的语法:

单值语法:值必须是以下之一:

• 无单位<number>:然后它被解释为<flex-grow>.
• 宽度的有效值:然后它被解释为<flex-basis>.
• 关键字值中的一个none,auto或initial.

第二个子弹暗示flex: 20%;相当于flex-basis: 20%;,因为它20%是一个有效值width.

但是,实际情况并非如此:

1. flex 速记

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

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

所述规范表示的是,在一个flex速记声明,当<flex-grow>与<flex-shrink>被省略,它们都缺省为1(MDN错误地指出该<flex-grow>缺省值为0)

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

仅指定flex-basis: 20%的叶子flex-grow和flex-shrink在分别为0和1各自的初始值,使得通过本身普通写法声明等效于速记flex: 0 1 20%.