flex-basis auto 和 0（零）的区别答案

【问题标题】：The difference between flex-basis auto and 0 (zero)flex-basis auto 和 0（零）的区别
【发布时间】：2018-05-14 16:58:14
【问题描述】：

这两个值有什么区别？我已经测试了许多示例，它们给出的结果完全相同...有人可以给我一个示例，其中flex-basis: auto; 与flex-basis: 0; 给出的结果不同

【问题讨论】：

@Michael_B：恕我直言，这个问题以前没有人问过。你提到的问题是一个不同的问题。虽然其中一个答案确实提到了flex-basis 的这些值，但这不是该问题的重点。在寻找完全相同的信息时，我被 this 问题所吸引，而不是其他问题。
@Michael_B 是的，但是您可以像我一样通过问题找到答案。 This question has been asked before and has a answer 的评论具有误导性。
@Michael_B 我没有声望点来投票重新讨论这个问题，所以我不得不说出来:(
天哪，Michael_B，您实际上编辑了另一个问题的标题，让它看起来更像是这个问题的副本？我正在回滚，你给它的标题与那个问题无关。

【解决方案1】：

"0" 和 "auto" flex-basis 在大多数情况下会有所不同（如果不是所有情况）：数值被解释为特定宽度，因此零与指定 "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>

【讨论】：