flex-basis auto和0（零）之间的差异

问题描述：

这两个值之间有什么区别？我已经测试了许多示例，它们给出的结果完全相同...有人可以举一个例子，其中 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（零）之间的差异

相关推荐