设置弹性项目之间的垂直间距

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级），解决最后一行的对齐问题有点复杂。这篇文章中详细讨论了该问题：在最后一行或特定行上定位弹性项目

但是，使用CSS Grid布局很简单。

.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>

Answer 2

我不是 100% 你想做的事，但这可能会成功

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

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