弹性项目的宽度为100％时，如何计算弹性基准? [英] how is a flex-basis calculated when the flex item's width is 100%?

问题描述

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

The initial value of flex-basis is automatically sized based on the contents of the flex items. And the content img element depends on the width of the parent element (width: 100%). In other words, an infinite loop of reference occurs between the flex item and the img element.

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

In fact, however, as in the following code snippet, processing will not stop with an infinite loop. Why is this? How does the browser (spec) avoid infinite loops?

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

推荐答案

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

In fact, however, as in the following code snippet, processing will not stop with an infinite loop. Why is this? How does the browser (spec) avoid infinite loops?

永远不会有无限循环，规则是不要向后退.通常，浏览器只会执行无限循环的一次迭代.

There is never an infinite loop and the rule is to not go backwards. In general, the browser will do only one iteration of the infinite loop.

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

Basically in your case you have used width:200% so we need a reference on the containing block (.text) to calculate this but we didn't define any width there so the browser will somehow ignore that width which will give us this output

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

现在，包含块的宽度已经确定，我们将其用作图像的参考，使其宽度变为 .test 的两倍，这也是其初始宽度.

Now that we have a width for our containing block we will use it as a reference for the image to make it twice the width of .test which is also its initial width.

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

这很简单，如果您使用 width:100％，则不会发生任何事情，因为所有宽度都将保持不变.

It's trivial now, that if you use width:100% nothing will happen since all the widths will remain the same.

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

This isn't specific to flexbox and may happen in different situation.

这里是 inline-block 的另一个示例:

.text {
  background: #ffa;
  display: inline-block;
  height:200px;
}

img {
  width: 200%;
}

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

这里发生了相同的逻辑， inline-block 使用图像来定义其宽度，然后我们移至图像，而不再返回.

Same logic happen here, the inline-block use the image to define its width then we move to the image and we don't get back again.

另一个没有图像的示例:

Another example without image:

.text {
  background: #ffa;
  float:left;
  height:100px;
}

.img {
  width: 50%;
  background:red;
}

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

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

Here is the part of the specification explaining this: https://www.w3.org/TR/css-sizing-3/#percentage-sizing

一些相关的引语:

..有时，百分比大小的盒子包含的块的大小取决于盒子本身的内在大小贡献，创建循环依赖性.在计算包含块的大小时，百分比的作用类似于自动.

..Sometimes the size of a percentage-sized box’s containing block depends on the intrinsic size contribution of the box itself, creating a cyclic dependency. When calculating the containing block’s size, the percentage behaves as auto.

..根据框的结果大小，不会重新解析包含块的大小；内容可能因此导致包含块的上溢或下溢.

这篇关于弹性项目的宽度为100％时，如何计算弹性基准?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！