宽度和弹性基础之间的区别[重复]

Posted 2023-03-06

【中文标题】宽度和弹性基础之间的区别[重复]

【英文标题】：Difference between width and flex-basis [duplicate]

【发布时间】：2016-11-08 17:12:33

【问题描述】：

我遇到了 width 和 flex-basis 之间的行为差​​异，What are the differences between flex-basis and width? 无法解释。

.outer 
  display: flex;
  background: yellow;
  padding: 10px;

.middle 
  display: flex;
  flex-shrink: 0;
  background: red;
  padding: 10px;

.inner 
  flex-basis: 258px;
  flex-shrink: 0;
  display: flex;
  flex-grow: 0;
  background: green;

.inner2 
  width: 258px;
  flex-shrink: 0;
  display: flex;
  flex-grow: 0;
  background: green;

<div class="outer">
  <div class="middle">
    <div class="inner">
      hello
    </div>
  </div>
</div>

<div class="outer">
  <div class="middle">
    <div class="inner2">
      hello
    </div>
  </div>
</div>

Here 是说明我遇到的问题的示例。我希望两行看起来相同，但是，当使用 flex-basis（第 1 行）时，flex 容器（.middle 元素）似乎忽略了其子元素（.inner 元素）的内在宽度，并且只采用考虑到文本。

在最新版本的 Chrome、FF 和 Safari 中可以观察到这种差异（但在 IE11/Edge 中没有）。

澄清：我不是在问为什么 IE11/Edge 的行为方式如此。它的行为（在这种情况下）在我看来实际上是合乎逻辑的。我在问为什么所有其他浏览器都存在差异。

更新：Edge 13 的行为就像 IE11。

【问题讨论】：

这让我想起了nested flex elements don't make parent grow

该问题在副本中已接受答案的“浏览器错误”部分中进行了解释。

正如我在对我的问题的回复中指出的那样，差异是由浏览器错误解释的。您所指的答案并未涵盖这一点，因此我认为我的问题不是重复的。

【参考方案1】：

这似乎是一个错误。 如果通过flex-basis 设置，既是弹性容器又是弹性项目的元素似乎忽略了其子项的固有尺寸，而是选择测量其子项内容的宽度/高度。具有讽刺意味的是，IE11/Edge 是唯一正确实现这一点的浏览器。

Chromium bug tracker

【参考方案2】：

这是因为 IE11 对 flex 的支持不同（技术上仅部分支持）。 IE 11 需要在第三个参数中添加一个单位，flex-basis 属性请参见下面源代码中的 msdn 文档。

因此，具有无单位 flex-basis 值的 flex 速记声明将被忽略。

flex-basis 是容器可以具有的最小宽度，然后它将根据您的其他规则增长/收缩。宽度不需要与 flex 和 flex-basis 同时使用，因为它们与 X 浏览器的兼容性相冲突。

我还更新了您的 codepen，以帮助解释。请看这里：http://codepen.io/mattpark22/pen/wWqKpz

现在您可以看到浏览器处理 flex 的方式有何不同：

flex-basis: 258px;
width: 258px;

我也删除了

display: flex;

来自 .outer - 这也有效果。

来源：http://caniuse.com/#search=flex-basis

来源：https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored

来源：https://msdn.microsoft.com/en-us/library/dn254946%28v=vs.85%29.aspx

【讨论】：

我知道行为是不同的，但 IE11 的呈现方式对我来说似乎更合乎逻辑。此外，仅在使用简写 flex 属性时才需要提供单位 — 我在这里使用完整的 flex-basis 属性（无论如何我都提供单位）。

我已经更新了我的答案以帮助更好地解释它，如果有帮助请告诉我？

我再次更新了我的答案，如果您需要任何进一步的说明，请告诉我 - 很乐意帮助@Dremora

如果外部容器上没有display: flex，中间元素将不再是弹性项目——这消除了差异，但没有解释为什么它们首先呈现不同的原因。

我知道 IE 的行为通常不如预期，我在过去 10 年一直在为 Web 开发。但在这种情况下，它的行为实际上对我来说似乎是合乎逻辑的，所以我想知道是什么导致了其他浏览器中 width 和 flex-basis 之间的差异。