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

Question

这两个值有什么区别？我已经测试了很多例子,他们只是给出了完全相同的结果......有人可以给我一个例子,其中flex-basis: auto;不会给出相同的结果flex-basis: 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>