flex-grow不能处理图像。

Question

目前，我正试着列一张清单。在左边的图片，适合我的“显示灵活布局”，并调整大小的所有浏览器。我的“柔性增长布局”列表1用于图像，3用于描述。没有图像，一切都很好，但是我的图像(100%宽度)并不适合行的1/3。

有人知道解决办法吗？

​

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

​

谢谢

西蒙

Answer 1

图像容器-- flex div --设置为flex-grow: 1。这很好。

除了flex-basis的默认值是auto (等级库)之外。

因此，您告诉项目，它的初始主尺寸(即flex-basis)应该是其内容(图像)的大小。这就是正在发生的事。该项目采用图像的自然大小。

将此添加到代码中：

• flex-basis: 0

或者，更好的是，这个：

• flex: 1

它是以下简称：

• flex: 1 1 0

它是以下简称：

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

从规范中：

7.2。灵活性的组成部分 作者被鼓励使用flex速记来控制灵活性，而不是直接使用它的长时间属性，因为速记正确地重置了任何未指定的组件以适应共同用途。

有关flex-basis: auto和flex-basis: 0之间区别的解释，请参阅本文：

• 使flex扩展项根据原始大小进行扩展。

​

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

​