Question

我有一个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>

Answer 1

我看到你遇到两个问题：

你的利润。删除flex-items上的边距。它们可能会占用您内容的空间，并导致最后一项包装。
你的@media（最小宽度：1800px）似乎没有踢，因为它是一个非常大的宽度尺寸，所以最大宽度保持在1200px，这导致最后一个项目换行。试着把它放到100px例如，你会看到。

请参阅：14.20.2. Execution of try-finally and try-catch-finally

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

1 个答案: