html - flex-basis auto和0(零)的区别

Question

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

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