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的另一个好处是，我们可以删除height中设置的margin-bottom和.box以及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

结合使用flex-start和间隔

1 个答案: