flex-basis auto和0（零）之间的差异 [英] The difference between flex-basis auto and 0 (zero)

问题描述

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

What is the difference between these two values? I've tested numerous examples and they just give the exact same result... Can someone please give me an example where flex-basis: auto; does not give the same result as flex-basis: 0;

推荐答案

0和 auto flex-basis在大多数情况下（即使不是在所有情况下）也会有所不同：数值被解释为特定的宽度，因此零将与指定 width：0 （因此会将元素折叠到给定内容的最小宽度，如果隐藏了溢出则将自身折叠为零。）

"0" and "auto" flex-basis will be different in most if not all situations: numeric values are interpreted as specific widths, so zero would be the same as specifying "width: 0" (and thus will collapse the element to its smallest possible width given the content, or to zero itself if its overflow is hidden.)

.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-basis auto和0（零）之间的差异的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！