为什么我的柔性盒包装在这种情况下？

Question

我有一个Flexbox行包装设置，如下所示。flex-items (.project)的最大宽度为500 is，我有一个medis查询，在最小屏幕宽度为1800 is时，使行1600 is的最大宽度。

在这个屏幕大小下，结果是一行2个项目和一行3个项目。为什么当项目的合并宽度为1500 on时，第三项换到第二行而不是停留在第一行？

如果它需要包装，我希望它在第二行上也会以同样的方式包装，从而创建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>

​

Answer 1

在我看来你有两个问题：

1. 你的毛边。删除您的弹性项目的页边距。它们可能会占用您的内容空间，并导致最后一项包装。
2. 您的@media (最小宽度:1800 to )似乎没有启动，因为它的宽度很大，因此最大宽度保持在1200 to，这导致了最后一项的包装。例如，尝试将其放到100 to，您就会看到。

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