当 flex 项的宽度为 100% 时，如何计算 flex-basis？

Question

flex-basis 的初始值根据 flex 项目的内容自动调整大小。和内容img元素取决于父元素的宽度 ( width: 100%)。换句话说，在 flex item 和 img 元素之间发生了一个无限循环的引用。

然而，事实上，就像在下面的代码片段中一样，处理不会随着无限循环而停止。为什么是这样？浏览器（规范）如何避免无限循环？

.row {
  display: flex;
  flex-wrap: wrap;
  width: 500px;
  background: #faf;
  height: 120px;
}

.text {
  background: #ffa;
}

img {
  width: 200%;
}

<div class="row post">
  <a href="#" class="text">
    <img src="https://placeimg.com/150/50/animals">
  </a>
</div>

Answer 1

\n

但实际上，如下面的代码片段所示，处理不会因无限循环而停止。为什么是这样？浏览器（规范）如何避免无限循环？

\n

\n\n

永远不存在无限循环，规则是不倒退。一般来说，浏览器只会执行一次无限循环迭代。

\n\n

基本上在您使用的情况下，width:200%我们需要对包含块（.text）进行引用来计算它，但我们没有在那里定义任何宽度，因此浏览器会以某种方式忽略该宽度，这将为我们提供此输出

\n\n

\r\n

\r\n

.row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  width: 500px;\r\n  background: #faf;\r\n  height: 120px;\r\n}\r\n\r\n.text {\r\n  background: #ffa;\r\n}\r\n\r\nimg {\r\n  /*width: 200%;*/\r\n}

\r\n

<div class="row post">\r\n  <a href="#" class="text">\r\n    <img src="https://placeimg.com/150/50/animals">\r\n  </a>\r\n</div>

\r\n

\r\n

\r\n

\n\n

现在我们有了包含块的宽度，我们将使用它作为图像的参考，使其宽度.test是其初始宽度的两倍。

\n\n

\r\n

\r\n

.row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  width: 500px;\r\n  background: #faf;\r\n  height: 120px;\r\n}\r\n\r\n.text {\r\n  background: #ffa;\r\n}\r\n\r\nimg {\r\n  width: 200%;\r\n}

\r\n

<div class="row post">\r\n  <a href="#" class="text">\r\n    <img src="https://placeimg.com/150/50/animals">\r\n  </a>\r\n</div>

\r\n

\r\n

\r\n

\n\n

现在很简单，如果您使用width:100%什么都不会发生，因为所有宽度都将保持不变。

\n\n\n\n

这不是 Flexbox 特有的，可能会在不同的情况下发生。

\n\n

这是另一个例子inline-block：

\n\n

\r\n

\r\n

.text {\r\n  background: #ffa;\r\n  display: inline-block;\r\n  height:200px;\r\n}\r\n\r\nimg {\r\n  width: 200%;\r\n}

\r\n

<a href="#" class="text">\r\n  <img src="https://placeimg.com/150/50/animals">\r\n</a>

\r\n

\r\n

\r\n

\n\n

这里发生相同的逻辑，inline-block使用图像来定义其宽度，然后我们移动到图像并且我们不会再返回。

\n\n

另一个没有图像的例子：

\n\n

\r\n

\r\n

.text {\r\n  background: #ffa;\r\n  float:left;\r\n  height:100px;\r\n}\r\n\r\n.img {\r\n  width: 50%;\r\n  background:red;\r\n}

\r\n

<a href="#" class="text">\r\n  <div class="img"> some text here</div>\r\n</a>

\r\n

\r\n

\r\n

\n\n

\n\n

以下是规范的部分解释：https://www.w3.org/TR/css-sizing-3/#percentage-sizing

\n\n

一些相关的引用：

\n\n

\n

..有时，包含块的百分比大小的框\xe2\x80\x99s 的大小取决于框本身的内在大小贡献，从而创建循环依赖性。计算包含块\xe2\x80\x99s 大小时，百分比的行为为 auto。

\n

\n\n

\n\n

\n

..包含块\xe2\x80\x99s 的大小不会根据框的结果大小重新解析；因此，内容可能会溢出或下溢包含块。

\n

\n