flex-basis：Webkit / Blink忽略内在长宽比 [英] flex-basis: Webkit / Blink ignore intrinsic aspect ratio

问题描述

给定一个flex容器

figure {
  display: flex;
  align-items: flex-start;
}

和一个300x300的图像，其柔性基本设置为其固有宽度的一半：

and a 300x300 image with its flex-basis set at half its intrinsic width:

figure img {
  flex: 0 0 150px;
}

Chrome 41和Safari 7会忽略长宽比并显示为150像素x 300像素：

Chrome 41 and Safari 7 ignore the aspect ratio and display it as 150px x 300px:

>

另一方面，Firefox 35保持内在长宽比不变：

Firefox 35 on the other hand keeps the intrinsic aspect ratio intact:

figure {
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -moz-box-align: start;
  box-align: start;
  -webkit-align-items: flex-start;
  -moz-align-items: flex-start;
  -ms-align-items: flex-start;
  -o-align-items: flex-start;
  align-items: flex-start;
  -ms-flex-align: start;
  
  width: 100%;
  border: 1px solid black;
}

figure img {
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  box-flex: 0;
  -webkit-flex: 0 0 150px;
  -moz-flex: 0 0 150px;
  -ms-flex: 0 0 150px;
  flex: 0 0 150px;
}

figure figcaption {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;
  -webkit-flex: 1 1 auto;
  -moz-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
}

<figure>
  <img src="//placekitten.com/g/300/300" />
  <figcaption>
    I'm the caption
  </figcaption>
</figure>

谁是正确的？我相信规范的相关部分是跨尺寸确定 ，但我很难解释它。

Who is correct? I believe the relevant section of the spec is Cross-size determination, but I'm having a hard time interpreting it.

推荐答案

根据审核者草稿，这些浏览器都无法正确呈现此类。

当我看到这个问题张贴在这里，我问在www风格的邮件列表，这是讨论它提示（通过readable-email.org）：

When I saw this question posted here, I asked about it on the www-style mailing list, and this is the discussion it prompted (via readable-email.org):

一致认为，对当前草案的严格解释会暗示图片大小为300x300像素，因为这是flex项目和flex项目的最小内容大小如果其最小大小属性为 auto （默认值和您示例中的大小写），则应该缩小到最小内容大小以下。

The consensus is that a strict interpretation of the current draft would suggest that the image be sized to 300x300 pixels because that's the minimum content size of the flex item and flex items are not supposed to shrink below their minimum content size if their min-size property is auto (the default, and the case in your example).

Daniel Holbert（Firefox上的Flexbox实作者）继续讨论另一个线程，其中他建议允许具有固有方位比率的项目收缩到低于其最小内容大小。他说：

Daniel Holbert (Flexbox implementor on Firefox) continued this discussion on another thread where he proposed that items with an intrinsic aspect ration should be allowed to shrink to below their minimum content size. He states:

最小内容大小对于包含宽高比的flex项目不是一个有用的下限。这些flex项目可以缩小到低于其最小内容大小，而不会溢出。

min-content sizes aren't really a useful lower-bound for flex items with aspect ratios. These flex items can shrink (honoring their intrinsic aspect ratio) below their min-content size, without overflowing.

，你的问题的答案是，没有一个浏览器正确地渲染（根据当前规范），但可能的规范将改变处理这种情况下，Firefox的当前渲染它将被认为是正确的未来。

Anyway, as I said, the answer to your question is that neither browser is rendering this correctly (as per the current spec), but it's possible that the spec will change to handle this case and the way Firefox is currently rendering it will be considered correct in the future.

这篇关于flex-basis：Webkit / Blink忽略内在长宽比的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！