Установка вертикальных промежутков между гибкими элементами

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). Эта проблема подробно обсуждается в этом посте: Ориентация элементов Flex на последнюю или конкретную строку

Однако ваш макет прост с помощью 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

justify-content: space-between; сделать центр каждого элемента в вашем flex. Таким образом, невозможно отдельно присвоить каждой строке свойство 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;
}

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

Я разместил обновленный код. Пожалуйста, проверьте, работает ли он для вас.

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

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

Я не на 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;
}