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

查看：9
本文介绍了flexbox 中的图像行为(嵌入在列中的行)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

下面的小提琴有三个块.

块 1 包含三列.中间一列有两行，每一行都设置为 flex:1.

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

块 3 仅包含中间的列，其中有两行，每行设置为 flex:1.第二行包含狗的图像.图像确实会缩小到包含它的行的高度.

问题是为什么块2中间列第二行的图像没有缩小到它所在行的高度?我可以添加哪些 CSS 规则来实现这一点?

.block{高度:100px；}.包装{边框:5px 纯紫色；显示:弹性；弹性方向:行；}.柱子{弹性:1;边框:3px 纯黄色；}.中间{显示:弹性；弹性方向:列；}.第一的{背景:红色；}.第二{背景:橙色；}.第三{背景:紫色；}.排{弹性:1;边框:1px纯黑色；显示:弹性；对齐项目:拉伸；}图片{弹性:1;}

<div class="左栏"></div><div class="中间列"><div class="row first"></div><div class="row second"></div>
<div class="右栏"></div>

<div class="包装块"><div class="左栏"></div><div class="中间列"><div class="row first"></div><div class="row second"><img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Dog.svg"/>

<div class="右栏"></div>

<div class="中间块"><div class="row first"></div><div class="row second"><img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Dog.svg"/>

解决方案

解决方案

替换:

.row {弹性:1；边框:1px纯黑色；显示:弹性；对齐项目:拉伸；}

与:

.row {弹性:1 1 0px；/* 在这条线上调整 */边框:1px纯黑色；/* 没变化 */显示:弹性；/* 没变化 */对齐项目:拉伸；/* 没变化 */}

演示 1

<小时>

说明

你写道:

<块引用>

问题是为什么中间第二行的图片块 2 的列不收缩到它所在行的高度是否包含在内?

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

在这些浏览器中，块 2 中的狗的图像很好地包含在 flex 项目中.图像在 IE 中有点拉伸，但仍然包含在内.

您的问题似乎是针对 Chrome 的.(我没有在 Safari 中进行测试，但那是像 Chrome 一样的 WebKit 浏览器，所以解决方案可能类似.)

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

演示 2

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

<小时>

您的图像是 div.row 的子元素(更具体地说:一个弹性项目)，一个具有行方向的弹性容器.

div.row 也是一个更大容器的 flex 项(在列方向)并且应用了 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 中试试这个:

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

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

使其flex: 1 1 0px，如CSS-Tricks，同样有效.

演示 3

所以，使用 px 或不使用单位 –而不是百分比在 0 上修复了 Chrome 中的问题......并且它不会破坏 Firefox 中的任何内容.

然而，在 IE11 中，px 有效但 unitless 无效.实际上，无单位会抹掉布局.

但 IE11 是另一回事...

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

<小时>

请注意，所有主流浏览器都支持 flexbox，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屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆