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

Question

我正在创建一个具有 2 列布局或 3 列布局的响应式网站。

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

我希望方框能填满最大可用空间。

Flexbox 工作完美，除了图像不会按比例调整大小(如您在我的代码中看到的)通常我会将 100% 宽度和 padding-bottom % 应用于 div，但 flex-box 元素似乎不允许这样做方法。

如果有帮助，图片都是 300 像素宽。我尝试将 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/