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

小编典典

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

css

下面的小提琴有三个方块。

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

阅读 261

2020-05-16

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

说明

你写了：

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

看来您只在Chrome中测试了代码，因为对于Firefox和IE11，问题的前提是错误的。

在那些浏览器中，第二块中的狗的图像很好地包含在flex项目中。图像在IE中有些拉伸，但是仍然包含在内。

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

这个问题的解决方法很有趣，因为属性值的微小差异（似乎微不足道）使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规范的 CommonValues中flex定义的，实际上有所不同。

在Chrome中尝试以下操作：

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

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

flex: 1 1 0px就像CSS-Tricks中所述，也可以使它起作用。

因此，使用px或不使用单位（而不是百分比）来0解决Chrome中的问题…并且在Firefox中不会破坏任何内容。

但是，在IE11中，px可以工作，但无单位不能。实际上，无单元消除了布局。

但是IE11是另一个故事…

IE11 在浏览器支持数据网站caniuse.com上一直显示对flexbox的 完全支持 ，直到最近，由于“存在大量错误” ，IE11 降级为 部分支持。在测试上述演示时，IE11定期刷新时呈现相同代码的方式有所不同。有关问题列表，请参见caniuse.com上的“已知问题”选项卡。

_请注意，除了IE 8和9之外，所有主要浏览器都支持flexbox
。某些最新的浏览器版本（例如Safari8和IE10）需要供应商前缀。如上所述，由于一些已知的错误，IE11提供了部分支持。要快速添加所需的所有前缀，请使用[Autoprefixer。

2020-05-16