“0”和“自动”弹性基准在大多数情况下（如果不是所有情况下）是不同的：数值被解释为特定的宽度，因此零将等同于指定"width: 0"--因此将把元素折叠到给定内容的最小可能宽度，或者如果隐藏了溢出或者元素可以直接调整大小（例如图像），则将其自身折叠为零。

.f {display:flex}
.f div {border:1px solid}
.zero {flex-basis: 0}
.auto {flex-basis: auto}

<div class="f">
  <div class="zero">This is flex-basis zero</div>
</div>

<div class="f">
  <div class="auto">This is flex-basis auto</div>
</div>

我认为，通常会引起混淆的原因（至少对我来说是这样）是，如果添加了其他flex属性，最终结果会被修改。通常，当查找基于flex的示例时，这些示例会与影响最终结果的其他flex属性混淆。例如，如果我们在丹尼尔Beck给出的示例中添加flex-grow：1。在这两种情况下，最终结果是相同的，因为您告诉框：“尽你所能地增长，直到你占据了可用的空间”。

.f {
  display: flex
}

.f div {
  border: 1px solid
}

.zero {
  flex-grow: 1;
  flex-basis: 0;
}

.auto {
  flex-grow: 1;
  flex-basis: auto
}

<div class="f">
  <div class="zero">This is flex-basis zero</div>
</div>

<div class="f">
  <div class="auto">This is flex-basis auto</div>
</div>