flex-grow不会按比例调整大小

Question

我正在创建一个响应式的网站，其中有2栏布局或3栏布局。

我正在使用flex-box，因为我想为它们设置一个顺序。

我希望这些盒子能填满最大的可用空间。

Flexbox运行得很好，除了图像不会按比例调整大小(就像你在我的代码中看到的那样)，通常我会对div应用100%的宽度和填充底部%，但flex-box项似乎不允许使用这种方法。

如果它有帮助，图像都是300px宽的。我尝试将flex-box类应用于图像，因为我希望我能有更多的运气。还没有..。

任何建议都是很棒的。

      <div class="flex-container">
             <img class="flex-item" src="image.png"   alt=""/>
             <img class="flex-item" src="image.png"   alt=""/>
             <img class="flex-item" src="image.png"   alt=""/>
             <img class="flex-item" src="image.png"   alt=""/>
             <img class="flex-item" src="image.png"   alt=""/>
             <img class="flex-item" src="image.png"   alt=""/>
     </div>

CSS

.flex-container {
  list-style: none;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  background-color:#99C;
  flex-direction: row;
  justify-content: center;

}


.flex-item {
      flex-grow:1;
}

Answer 1

在镜像中添加包装器：

<div class="flex-item">
<img src="%path%" />
</div>

和css

img{
width: 100%;
max-width: 100%;
height: auto;
}

http://jsfiddle.net/ea2xh9we/