结合 flex-start 和 space-between 的外观 [重复]

Question

我有一个我想用 CSS 显示的项目列表。最初，一行中只有两个并排的项目，但现在我想让它响应更大的屏幕，所以我想让它在一行上显示 3 个项目。我的旧代码使用 justify-content:space-between 看起来像这样。显示奇数个项目看起来不错。

.flex-container-old{
  margin-top: 50px;
  background: magenta;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.box-old{
  width: 40%;
  border: 1px solid black;
  margin-bottom: 20px;
  height: 300px;
  background: orange;
}

.wrapper{
  margin: 0 auto;
  width: 80%;
}

body{
background:#D3D3D3;
}

<div class="wrapper">
      <div class="flex-container-old">
          <div class="box-old">
          </div>
          <div class="box-old">
          </div>
          <div class="box-old">
          </div>
          <div class="box-old">
          </div>
          <div class="box-old">
          </div>
      </div>
  </div>

所以很自然地，我通过修改 width 属性将其扩展到一行中的三个项目，最终得到以下结果。

.flex-container-new{
  background: lightblue;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.box {
  width: 30%;
  border: 1px solid black;
  margin-bottom: 20px;
  height: 300px;
  background: orange;
}

.wrapper{
  margin: 0 auto;
  width: 80%;
}

<div class="wrapper">
    <div class="flex-container-new">
      <div class="box">
      </div>
      <div class="box">
      </div>
      <div class="box">
      </div>
      <div class="box">
      </div>
      <div class="box">
      </div>
    </div>
</div>

在上面一行包含三个项目的代码中，我的问题是我希望最后一行中的最后一个项目被推到左边，与上面一行中的中间项目对齐。可悲的是，引导程序不是一种选择。这是出于学习目的。有没有办法只用 CSS 就可以实现上述目标？非常感谢。

Answer 1

使用CSS Grid 更容易控制，因为我们可以指定x 和y 轴。使用Flexbox，您只能可靠地控制x 轴。如果您还没有听说过fr 单元，那就是defined by Mozilla，如下：

fr 是“分数”的缩写，是一个单位，表示网格容器中可用空间的一小部分。

使用Grid 的另一个好处是我们可以删除.box 中的height 和margin-bottom 设置以及flex-wrap 规则。这个网格布局的所有内容，从单元格的高度到它们之间的grid-gap 间距，都在父级中定义。

.grid-container-new {
  background: lightblue;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 300px);
  grid-gap: 20px;
}

.box {
  border: 1px solid black;
  background: orange;
}

<div class="grid-container-new">
  <div class="box">
  </div>
  <div class="box">
  </div>
  <div class="box">
  </div>
  <div class="box">
  </div>
  <div class="box">
  </div>
</div>

jsFiddle