Flexbox flex-wrap显示图像相互流动

Question

我似乎无法在以下代码中使用flex-wrap: row wrap。图像只是相互流动而不是包裹成新行。我究竟做错了什么？我使用的是最新版本的Chrome。

您可以看到codepen here：

＆＃13;

＆＃13;

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
.row {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
}
.col-4 {
  width: 33.33%;
  text-align: center;
}

＆＃13;

<div class="row">
  <h2>Featured Work</h2>
</div>
<div class="row bottom">
  <div class="col-4">
    <img src="http://i.stack.imgur.com/QfaLm.gif">
    <h3>APPIFY</h3>
  </div>
  <div class="col-4">
    <img src="http://i.stack.imgur.com/QfaLm.gif">
    <h3>SUNFLOWER</h3>
  </div>
  <div class="col-4">
    <img src="http://i.stack.imgur.com/QfaLm.gif">
    <h3>BOKEH</h3>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

问题是即使内容较宽，您也会强制执行33％的宽度：

.col-4 {
  width: 33.33%;
}

相反，请使用min-width。然后，如果其内容更宽，则允许弹性项目增长更多。

.col-4 {
  min-width: 33.33%;
}

＆＃13;

＆＃13;

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
.row {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
}
.col-4 {
  min-width: 33.33%;
  text-align: center;
}

＆＃13;

<div class="row">
  <h2>Featured Work</h2>
</div>
<div class="row bottom">
  <div class="col-4">
    <img src="http://i.stack.imgur.com/QfaLm.gif">
    <h3>APPIFY</h3>
  </div>
  <div class="col-4">
    <img src="http://i.stack.imgur.com/QfaLm.gif">
    <h3>SUNFLOWER</h3>
  </div>
  <div class="col-4">
    <img src="http://i.stack.imgur.com/QfaLm.gif">
    <h3>BOKEH</h3>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;