Question

我正在创建一个响应式网站，其中包含2列布局或3列布局。

我正在使用flex-box，我希望为它们设置一个顺序序列。

我希望这些方框能够填补最大可用空间。

Flexbox工作得很好，除了图像不会按比例调整大小（正如你在我的代码中看到的）通常我会将100％宽度和padding-bottom％应用于div但是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/

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

1 个答案: