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

【问题标题】：Flexbox flex-wrap is showing images flow over each otherFlexbox flex-wrap 显示图像相互流动
【发布时间】：2019-04-24 03:22:09
【问题描述】：

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

你可以看到codepenhere：

* {
  -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;
}

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

【问题讨论】：

标签： html css flexbox

【解决方案1】：

问题是你强制使用 33% 的宽度，即使内容更宽：

.col-4 {
  width: 33.33%;
}

改为使用min-width。然后，如果内容更宽，将允许 flex 项目增长得更多。

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

* {
  -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;
}

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

【讨论】：