Question

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Here就是说明我遇到问题的例子。我希望两个行看起来都一样，但是，当使用flex-basis（第1行）时，flex容器（.middle元素）似乎忽略了它的子节点的内在宽度（{{1元素）并且只考虑文本。

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

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

更新：Edge 13的行为与IE11类似。

Answer 1

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

Chromium bug tracker

Answer 2

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

因此忽略无单位弹性基础值的弹性简写声明。

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

我也更新了你的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

宽度和柔性基础之间的差异

2 个答案: