flexbox中的图像行为(嵌入列中的行)

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 */
}

演示1

说明

你写了:

问题是为什么第2块中间栏第二行的图像没有缩小到包含它的行的高度？

您似乎只在Chrome中测试了代码,因为在Firefox和IE11中,您的问题的前提是错误的.

在那些浏览器中,块2中的狗的图像很好地包含在flex项中.IE中的图像有点拉长,但它仍然包含在内.

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

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

演示2

这个问题的解决方案很有意思,因为属性值的一个小的,看似微不足道的差异在Chrome渲染中产生了很大的不同.

您的图像是div.row具有行方向的Flex容器的子元素(更具体地说:flex项).

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中flex定义的,它实际上有所不同.

在Chrome中试试这个:

替换flex: 1在div.row用它的等效flex: 1 1 0%.您会注意到渲染时没有任何变化.

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

flex: 1 1 0px像CSS-Tricks中所述,制作它也有效.

演示3

因此,使用px或不使用单位 - 而不是百分比 - 来0修复Chrome中的问题......并且它不会破坏Firefox中的任何内容.

然而,在IE11中,px无法工作但无单元.实际上,无单位会消除布局.

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

在浏览器支持数据网站caniuse.com上,IE11 直到最近才显示对flexbox的全面支持,当时由于"存在大量错误" ,它被降级为部分支持.在测试上述演示时,IE11会定期在刷新时以不同的方式呈现相同的代码.有关问题列表,请参阅caniuse.com上的" 已知问题"选项卡.

请注意,除IE 8和9外,所有主流浏览器都支持flexbox .最近的一些浏览器版本,例如Safari 8和IE10,需要供应商前缀.如上所述,IE11由于几个已知的错误而提供部分支持.要快速添加所需的所有前缀,请使用Autoprefixer.在更多的浏览器兼容性细节这个答案.