flex-grow不适用于图像 [英] flex-grow is not working with images

问题描述

目前，我正在尝试列出一个清单.在左侧的图像适合我的显示弹性布局"，并在所有浏览器上调整大小.我的伸缩式布局"列表中的图像1和描述3.没有图像，一切都很好，但是使用我的图像(宽度为100％)，它就不能放入行的1/3 ...

Currently, I'm trying to make a list. On the left side images which fit into my "display flex layout" and resize on all browsers. My "flex-grow layout" list 1 for the image and 3 for the description. Without images, everything is fine, but with my image (100% width) it does not fit into the 1/3 of the row ...

有人知道解决方案吗?

#main {
    height: 100px;
    border: 1px solid #c3c3c3;
    display: -webkit-flex; /* Safari */
    display: flex;
}
#main div:nth-of-type(1) {-webkit-flex-grow: 1;}
#main div:nth-of-type(2) {-webkit-flex-grow: 3;}
#main div:nth-of-type(1) {flex-grow: 1;}
#main div:nth-of-type(2) {flex-grow: 3;}
#main img { width: 100% }

<div id="main">
  <div style="background-color:coral;"><img src="http://www.der-eyecatcher.de/wp-content/uploads/2016/02/Lampe-silber-Schirm_1.jpg"></div>
  <div style="background-color:lightblue;">Description</div>
</div>

<hr>flex-grow without Image<hr>

<div id="main">
  <div style="background-color:coral;"></div>
  <div style="background-color:lightblue;">Description</div>
</div>

谢谢

西蒙(Simon)

推荐答案

您有图片容器–弹性项目div–设置为flex-grow: 1.很好.

You have the image container – the flex item div – set to flex-grow: 1. That's fine.

除了flex-basis的默认值是auto(因此，您要告知商品其初始主要尺寸(即flex-basis)应为其内容(图片)的尺寸.这就是正在发生的事情.该项目采用图像的自然尺寸.

So, you're telling the item that it's initial main size (i.e., flex-basis) should be the size of its content (the image). That's exactly what's happening. The item takes the natural size of the image.

将此添加到您的代码中:

Add this to your code:

• flex-basis: 0

或者，更好的是，

• flex: 1

它的缩写:

• flex: 1 1 0

它的缩写:

• flex-grow: 1
• flex-shrink: 1
• flex-basis: 0

• flex-grow: 1
• flex-shrink: 1
• flex-basis: 0

根据规范:

7.2.的组成 灵活性

7.2. Components of Flexibility

鼓励作者使用flex速记来控制灵活性 而不是直接使用其速记属性(如速记) 正确重置任何未指定的组件以适应常见 使用.

Authors are encouraged to control flexibility using the flex shorthand rather than with its longhand properties directly, as the shorthand correctly resets any unspecified components to accommodate common uses.

有关flex-basis: auto和flex-basis: 0之间差异的说明，请参见此帖子:

For an explanation of the difference between flex-basis: auto and flex-basis: 0, see this post:

• 根据其原始大小灵活增长展开项

#main {
  height: 100px;
  border: 1px solid #c3c3c3;
  display: flex;
}

/* adjustment here */
#main div:nth-of-type(1) {
  flex: 1;
}

#main div:nth-of-type(2) {
  flex-grow: 3;
}

#main img {
  width: 100%;
  height: auto;
}

<div id="main">
  <div style="background-color:coral;"><img src="http://www.der-eyecatcher.de/wp-content/uploads/2016/02/Lampe-silber-Schirm_1.jpg"></div>
  <div style="background-color:lightblue;">Description</div>
</div>

<hr>flex-grow without Image
<hr>

<div id="main">
  <div style="background-color:coral;"></div>
  <div style="background-color:lightblue;">Description</div>
</div>

这篇关于flex-grow不适用于图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！