Question

目前，我正试图制作一份清单。在左侧图像适合我的＆＃34;显示弹性布局＆＃34;并在所有浏览器上调整大小。我的＆＃34; flex-grow布局＆＃34;列表1表示图像，3表示描述。没有图像，一切都很好，但是我的图像（100％宽度）不适合行的1/3 ......

有人知道解决方案吗？

＆＃13;

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

＆＃13;

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

＆＃13;

谢谢

西蒙

Answer 1

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

flex-basis的默认值为auto（spec）。

因此，您告诉该项目它的初始主要大小（即flex-basis）应该是其内容（图像）的大小。这正是发生的事情。该项目采用图像的自然大小。

将此添加到您的代码中：

flex-basis: 0

或者，更好的是，这个：

flex: 1

简称：

flex: 1 1 0

简称：

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

来自规范：

7.2. Components of Flexibility

鼓励作者使用flex简写来控制灵活性   而不是直接用它的速记属性，作为速记   正确地重置任何未指定的组件以容纳common uses。

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

Make flex-grow expand items based on their original size

#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不适用于图像

1 个答案: