flexbox中的图像行为（嵌入列中的行） [英] Image behavior within flexbox (rows embedded in columns)

问题描述

下面的小提示有三个块。

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

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

块3 仅包含中间列，其中有两行，每行设置为flex：1。第二行包含狗的图像。

问题是为什么块2的中间列的第二行中的图像不是收缩到包含它的行的高度？我可以添加什么CSS规则来实现这一点？

  .block {height：100px;}。wrapper {border：5px solid purple;显示：flex; flex-direction：row;}。column {flex：1; border：3px solid yellow;}。middle {display：flex; flex {direction：flex; direction} {flex：direction; flex-direction：column;}; first {background：red;}。 border：1px solid black;显示：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>  

解决方案

解决方案

replace：

 。 row {
 flex：1; 
 border：1px solid black; 
 display：flex; 
 align-items：stretch; 
} 
  

与：

  .row {
 flex：1 1 0px; / *在此行上调整* / 
 border：1px solid black; / * no change * / 
 display：flex; / *无变化* / 
 align-items：stretch; / * no change * / 
} 
  

演示1

---

说明

您写道：

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

您似乎只是在Chrome中测试过您的代码，因为在Firefox和IE11时您的问题的前提是假的。

那些浏览器在块2中的狗的图像恰好包含在flex项目内。

您的问题似乎是Chrome特有的。 （我没有在Safari中测试，但是这是一个WebKit浏览器，如Chrome，所以解决方案可能是类似的。）

这里是你的原始代码的演示，想要跨浏览器测试：

DEMO 2

这个问题的解决方案很有趣，因为一个小的，看似微不足道的属性值的差异在Chrome渲染中有很大的区别。

---

您的图片是 div.row ，具有行方向的柔性容器。





div.row 也是较大容器的弹性项（在列方向） c $ c> flex：1 。 Chrome中的问题植根于 flex：1 声明。

flex：1

flex flex-grow ， flex -shrink 和 flex-basis 。

flex：1 等效于 flex-grow：1 ， shrink：1

请注意，百分号符号（％）后 0 。它在flexbox规范的 共同价值<$ c $

在Chrome中尝试这个方法：

em>

在中替换 flex：1 div.row 其等效 flex：1 1 0％。您会注意到，呈现时没有任何变化。

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

使它 flex：1 1 0px ，如 CSS-Tricks 也可以使用。

DEMO 3

px 或没有单位–而不是百分比–在 0 修复了Chrome中的问题...它不会破坏任何东西在Firefox。

然而，在IE11中， px 无效，但无单位。

$ b

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

---

请注意，所有主流浏览器都支持flexbox， except IE 8& 9 。某些最新的浏览器版本（例如Safari 8和IE10）需要供应商字首 。如上所述，IE11由于几个已知的错误而提供部分支持。要快速添加所需的所有前缀，请使用 Autoprefixer 。 此答案中的更多浏览器兼容性详情。

The below fiddle has three blocks.

block 1 contains three columns. The middle column has two rows within it, each set to flex:1.

block 2 contains three columns. The middle column has two rows within it, each set to flex:1. The second row contains an image of a dog. The image will not shrink to the height of the row within which it is contained.

block 3 contains only the middle column which has two rows within it, each set to flex:1. The second row contains an image of a dog. The image DOES shrink to the height of the row within which it is contained.

The question is why does the image in the second row of the middle column of block 2 not shrink to the height of the row within which it is contained? What CSS rules can I add to make this happen?

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

解决方案

Solution

replace:

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

with:

.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

---

Explanation

You wrote:

The question is why does the image in the second row of the middle column of block 2 not shrink to the height of the row within which it is contained?

It appears that you tested your code in Chrome only, because the premise of your question is false when it comes to Firefox and IE11.

In those browsers the image of the dog in block two is contained nicely within the flex item. The image is a bit stretched in IE, but it's contained nonetheless.

Your question appears to be Chrome-specific. (I didn't test in Safari, but that's a WebKit browser like Chrome, so the solution may be similar.)

Here's a demo of your original code in case you want to test across browsers:

DEMO 2

The solution to this problem is interesting because a small and seemingly insignificant difference in a property value makes a big difference in Chrome rendering.

---

Your image is a child element (more specifically: a flex item) of div.row, a flex container with row-direction.

div.row is also a flex item of a larger container (in column-direction) and has flex: 1 applied. The problem in Chrome is rooted in that flex: 1 declaration.

What does flex: 1 mean?

The flex property is shorthand for flex-grow, flex-shrink and flex-basis.

flex: 1 is the equivalent of flex-grow: 1, flex-shrink: 1 and flex-basis: 0%.

Notice that percentage sign (%) after the 0. It's defined in the flexbox spec's Common Values of flex and it actually makes a difference.

Try this in Chrome:

Replace flex: 1 in div.row with its equivalent flex: 1 1 0%. You'll notice that nothing changes when rendered.

Now remove the percentage sign and run it again. The image snaps into place.

Making it flex: 1 1 0px, like stated in CSS-Tricks, also works.

DEMO 3

So, using px or no unit – and not a percentage – on the 0 fixes the problem in Chrome... and it doesn't break anything in Firefox.

In IE11, however, px works but unitless does not. In fact, unitless obliterates the layout.

But IE11 is another story...

On the browser support data website caniuse.com, IE11 was showing full support for flexbox until recently, when it was downgraded to partial support due to the "large amount of bugs present". In testing the above demos, IE11 regularly rendered the same code differently on refresh. See the Known Issues tab on caniuse.com for a list of problems.

---

Note that flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. IE11, as mentioned above, offers partial support due to several known bugs. For a quick way to add all the prefixes you need, use Autoprefixer. More browser compatibility details in this answer.

这篇关于flexbox中的图像行为（嵌入列中的行）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！