css - 在这种情况下，为什么我的flexbox项包装好？

我有一个Flexbox换行设置，如下所示。 flex-items（.project）的最大宽度为500px，我有一个medis查询，该查询使行的最大宽度为1600px，而最小屏幕宽度为1800px。

在该屏幕尺寸下，结果是一行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>

最佳答案

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


您的利润。删除弹性项目上的边距。它们可能会占用您内容的空间，并导致最后一项包装。
您的@media（最小宽度：1800像素）似乎没有被踢，因为它的宽度非常大，因此最大宽度仍为1200像素，这导致最后一个项目要换行。例如，尝试将其设置为100px，您将看到。


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

关于css - 在这种情况下，为什么我的flexbox项包装好？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49368175/