Question

下面的小提琴有三个块。

第1块包含三列。中间列中有两行，每行设置为flex：1。

第2块包含三列。中间列中有两行，每行设置为flex：1。第二行包含一张狗的图像。图像不会缩小到包含它的行的高度。

块3 仅包含中间列，其中包含两行，每列设置为flex：1。第二行包含一张狗的图像。图像会缩小到包含它的行的高度。

问题是为什么第2块中间栏第二行的图像没有缩小到包含它的行的高度？我可以添加哪些CSS规则来实现这一目标？

.block{
    height:100px;
}

.wrapper{
    border:5px solid purple;
    display:flex;
    flex-direction:row;
}

.column{
    flex:1;
    border:3px solid yellow;
}

.middle{
    display:flex;
    flex-direction:column;
}

.first{
    background:red;
}

.second{
    background:orange;
}

.third{
    background:purple;
}

.row{
    flex:1;
    border:1px solid black;
    display:flex;
    align-items:stretch;
}

img{
    flex:1;
}

<div class="wrapper block">
<div class="left column"></div>
<div class="middle column">
  <div class="row first"></div>
  <div class="row second"></div>
      	
</div>
<div class="right column"></div>
</div>

<div class="wrapper block">
<div class="left column"></div>
<div class="middle column">
  <div class="row first"></div>
  <div class="row second">
            	<img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Dog.svg" />
  </div>

</div>
<div class="right column"></div>
</div>

<div class="middle block">
  <div class="row first"></div>
  <div class="row second">
            	<img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Dog.svg" />
  </div>

</div>

Answer 1

解决方案

取代：

.row {
    flex: 1;
    border: 1px solid black;
    display: flex;
    align-items: stretch;
}

使用：

.row {
    flex: 1 1 0px;             /* adjustment on this line */
    border: 1px solid black;   /* no change */
    display: flex;             /* no change */
    align-items: stretch;      /* no change */
}

DEMO 1

解释

您写道：

问题是为什么图像在中间的第二行块2的列不缩小到其中的行的高度是否包含？

您似乎只在Chrome中测试了代码，因为在涉及Firefox和IE11时，您的问题的前提是错误的。

在这些浏览器中，第二个块中的狗的图像很好地包含在flex项目中。 IE中的图像有点拉长，但它仍然包含在内。

您的问题似乎是特定于Chrome的。（我没有在Safari中测试，但这是像Chrome这样的WebKit浏览器，因此解决方案可能类似。）

以下是您希望跨浏览器进行测试的原始代码演示：

DEMO 2

这个问题的解决方案很有意思，因为属性值的一个小的，看似无关紧要的差异会对Chrome渲染产生很大的影响。

您的图片是div.row的子元素（更具体地说是一个弹性项），一个带行方向的弹性容器。

div.row也是较大容器的弹性项目（在列方向上）并已应用flex: 1。 Chrome中的问题源于flex: 1声明。

flex: 1是什么意思？

flex属性是flex-grow，flex-shrink和flex-basis的简写。

flex: 1相当于flex-grow: 1，flex-shrink: 1和flex-basis: 0%。

请注意0之后的百分号（％）。它是在flexbox规范的Common Values of flex中定义的，它实际上有所不同。

在Chrome中试用：

将flex: 1中的div.row替换为等效的flex: 1 1 0%。您会注意到渲染时没有任何变化。

现在删除百分号并再次运行。图像卡入到位。

如CSS-Tricks中所述，flex: 1 1 0px也可以使用。

DEMO 3

因此，在px上使用0或没有单位而非百分比修复了Chrome中的问题...并且它不会破坏Firefox中的任何内容。

然而，在IE11中，px可以正常工作，但无法工作。实际上，无单位会消除布局。

但IE11是另一个故事......

在浏览器支持数据网站caniuse.com上，IE11直到最近才显示完全支持，直到最近，由于“降级为部分支持存在大量的错误“。在测试上述演示时，IE11会定期在刷新时以不同的方式呈现相同的代码。有关问题列表，请参阅caniuse.com上的Known Issues标签。

请注意，所有主流浏览器except IE 8 & 9都支持flexbox。最近的一些浏览器版本，例如Safari 8和IE10，需要vendor prefixes。如上所述，IE11由于几个已知的错误而提供部分支持。要快速添加所需的所有前缀，请使用Autoprefixer。 this answer中的更多浏览器兼容性详细信息。

Answer 2

这是使用相对/绝对定位的一种解决方案。不确定它是否像某些MXMJ类型所说的那样“犹太洁食”，但它确实有效。请参阅CSS底部的添加代码。

.block{
    height:100px;
}

.wrapper{
    border:5px solid purple;
    display:flex;
    flex-direction:row;
}

.column{
    flex:1;
    border:3px solid yellow;
}

.middle{
    display:flex;
    flex-direction:column;
}

.first{
    background:red;
}

.second{
    background:orange;
}

.third{
    background:purple;
}

.row{
    flex:1;
    border:1px solid black;
    display:flex;
    align-items:stretch;
}

img{
    flex:1;
}

/* Added Code */
.middle .row {
    position: relative;
}

.middle .row img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    max-width: 95%;
    max-height: 95%;
}

<div class="wrapper block">
<div class="left column"></div>
<div class="middle column">
  <div class="row first"></div>
  <div class="row second"></div>
      	
</div>
<div class="right column"></div>
</div>

<div class="wrapper block">
<div class="left column"></div>
<div class="middle column">
  <div class="row first"></div>
  <div class="row second">
            	<img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Dog.svg" />
  </div>

</div>
<div class="right column"></div>
</div>

<div class="wrapper block">
  <div class="row first"></div>
  <div class="row second">
            	<img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Dog.svg" />
  </div>

</div>

flexbox中的图像行为（列中嵌入的行）

2 个答案:

解决方案

解释