为什么我的 flexbox 项目在这种情况下会换行？答案

【问题标题】：Why does my flexbox item wrap in this case?为什么我的 flexbox 项目在这种情况下会换行？
【发布时间】：2018-08-28 07:41:40
【问题描述】：

我有一个 Flexbox 换行设置，如下所示。 flex-items (.project) 的最大宽度是 500 像素，我有一个 medis 查询，它使行的最大宽度为 1600 像素，最小屏幕宽度为 1800 像素。

在该屏幕尺寸下，结果是一行 2 个项目和一行 3 个项目。为什么当项目的组合宽度为 1500px 时，第三项会换行到第二行而不是留在第一行？

如果它需要换行，我希望它在第二行也以相同的方式换行，创建 2 行和 1 行。

我也想不出一个简洁的方式来命名这个问题，所以任何建议我编辑都将不胜感激！

.row {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
  max-width: 1200px;
  margin: 0 auto;
}

.project {
  color: #F7B801;
  background-color: #fff;
  width: 90%;
  max-width: 500px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  transition: box-shadow 0.3s cubic-bezier(.25, .8, .25, 1);
  margin: 3vh;
  padding: 30px 0;
}

@media (min-width: 1800px) {
  .row {
    max-width: 1600px;
  }
}

<div class="projects">
  <h2>Personal Projects</h2>
  <p class="projects-tagline">Responsively designed personal projects made with the glorious trinity of HTML, CSS and Javascript!</p>
  <div class="row">
    <div class="project calculator">
      <h3 class="card-title">Calculator</h3>
      <a href="https://blbaylis.github.io/Calculator"><img class="img calculator-img" src="calculator all.png"></a>
      <a class="project-link" href="https://blbaylis.github.io/Calculator">Check it out!</a>
    </div>
    <div class="project twitch">
      <h3 class="card-title">Twitch.Tv Helper Tool</h3>
      <a href="https://blbaylis.github.io/Twitch-Tool"><img class="img twitch-img" src="twitch all.png"></a>
      <a class="project-link" href="https://blbaylis.github.io/Twitch-Tool">Check it out!</a>
    </div>
    <div class="project tictactoe">
      <h3 class="card-title">Tic-Tac-Toe Game</h3>
      <a href="https://blbaylis.github.io/tic-tac-toe"><img class="img tictactoe-img" src="tictactoe all.png"></a>
      <a class="project-link" href="https://blbaylis.github.io/tic-tac-toe">Check it out!</a>
    </div>
    <div class="project pomodoro">
      <h3 class="card-title">Pomodoro Timer</h3>
      <a href="https://blbaylis.github.io/pomodoro-timer"><img class="img pomodoro-img" src="pomodoro all.png"></a>
      <a class="project-link" href="https://blbaylis.github.io/pomodoro-timer">Check it out!</a>
    </div>
    <div class="project simon-says">
      <h3 class="card-title">Simon Says Game</h3>
      <h4 class="card-title">Coming soon!</h4>
    </div>
  </div>
</div>

【问题讨论】：

你能把你的代码放在一个 plunker 中以便我们测试它的行为吗？
在您的代码中，第三项不会换行到第二行。它仍然在第一行。所以你在第 1 行有 3 个项目，在第 2 行有两个项目。
@t3__rry 原谅我的无知，我以前从未使用过 Plunker。我尝试制作一个，但由于某种原因，我的样式都不适用：/
@Michael_B 这很奇怪，但我想很好。我在 1850 x 650 的 Firefox 响应式设计模式下查看它。DPI 为 1.25，不确定这是否会有所不同。我对 dpi 的了解不是很深。
@t3__rry 这是我失败的 Plunker plnkr.co/edit/nDG5FkJttZIWAufhUsMz?p=preview

标签： css flexbox

【解决方案1】：

在我看来，你有两个问题：

您的利润。删除弹性项目的边距。它们可能会占用您内容的空间，并导致最后一个项目换行。
您的@media (min-width: 1800px) 似乎没有启动，因为它是一个非常大的宽度尺寸，所以最大宽度保持在 1200px，这导致最后一个项目换行。例如，尝试将其设置为 100 像素，您会看到。

见：https://stackblitz.com/edit/angular-3mp3a3

【讨论】：

将 .project 的边距从 3vh 更改为 0 3vh 立即修复了它。谢谢！