flex-grow不适用于图像

Question

目前,我正在努力制作一份清单.在左侧图像适合我的"显示flex布局"并在所有浏览器上调整大小.我的"flex-grow布局"列表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

您将图像容器 - 弹性项目div- 设置为flex-grow: 1.没关系.

除了默认值flex-basisis auto(spec).

所以,你告诉项目它的初始主要大小(即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-grow扩展项目

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