html - 设置 flex 元素之间的垂直间隙

Question

如果这是我们的代码，它会在每行中创建 4 个框，它们之间的垂直间距相等，但有两个问题我不知道如何解决:

1. 最后一行的框应该向左调整。

2. 盒子之间应该有 20px 的垂直间距。

我如何使用 flexbox 做到这一点？

.wrapper {
  max-width: 80%;
  margin: 20px auto 0;
  display: flex;
  flex-flow: wrap;
  justify-content: space-between;
  /* justify-content: flex-start; */
}

.box {
  flex-basis: 23%;
  height: 100px;
  outline: 1px solid black;
  background-color: #ccc;
  margin-bottom: 20px;
}

<div class="wrapper">

  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>

</div>

Answer 1

修复最后一行对齐问题对于 flexbox(级别 1)来说有点复杂。这篇文章详细讨论了这个问题:Targeting flex items on the last or specific row

但是，使用 CSS 网格，您的布局很简单。

.wrapper {
  max-width: 80%;
  margin: 20px auto 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(21%, 1fr));
  grid-auto-rows: 100px;
  grid-gap: 20px; /*shortand for grid-column-gap & grid-row-gap */
  }

.box {
  outline: 1px solid black;
  background-color: #ccc;
}

<div class="wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>