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

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>

Answer 2

variables使flex中的每个项目居中。因此，不可能单独为每一行赋予justify-content: space-between;属性。因此，您可以尝试以下小技巧：

justify-content

.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%;
  margin: 0 1% 20px;
  height: 100px;
  outline: 1px solid black;
  background-color: #ccc;
}

Answer 3

我不是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;
}

Answer 4

尝试一下：

.wrapper{
  justify-content: flex-start;
}
.box {
  flex-basis: 23%;
  margin-right: 2%;
  margin-bottom: 20px;
}

想法是：23％+ 2％= 25％，因此，除非您限制最小宽度，否则每行将有4个对象。但是布局仍然是justify-content: flex-start;

Answer 5

我已经发布了更新的代码。请检查它是否适合您。

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

.box {
  flex: 0 0 23%;
  max-width: 23%;
  margin-left: 1%;
  margin-right: 1%;
  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>