Последние дети сетки получают гигантскую причину водостока flexbox пробел между

У меня есть сетка элементов, которую я хочу разделить на 3. Поэтому я хочу, чтобы каждая строка содержала 3 элемента. Поскольку я хочу, чтобы у них был равный желоб, я использовал justify-content: space-between при использовании flexbox. Это выглядело хорошо, пока я не заметил, что когда последняя строка содержит 2 элемента, они просто расщепляются.

.blue{
  width: 420px;
  height: 230px;
  background: blue;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.red{
  width: 32%;
  height: 100px;
  background: red;
  display: block;
  border-sizing: border-box;
  border: 1px solid white;
}

.green{
  width: 420px;
  height: 230px;
  background: green;
  display: flex;
  flex-wrap: wrap;
}

.orange{
  width: 32%;
  height: 100px;
  background: orange;
  display: block;
  border-sizing: border-box;
  border: 1px solid white;
  margin-right: 1.25%;
}

.orange:nth-child(3){
  margin-right: 0;
}

<section class="blue">
  <div class="red"></div>
  <div class="red"></div>
  <div class="red"></div>
  <div class="red"></div>
  <div class="red"></div>
</section>

<section class="green">
  <div class="orange"></div>
  <div class="orange"></div>
  <div class="orange"></div>
  <div class="orange"></div>
  <div class="orange"></div>
</section>

Ответы

Ответ 1

Вы можете использовать flex:1; + min-width для создания точки останова.

Вы также можете использовать псевдоэлемент, чтобы заполнить часть последней строки.

.blue{
  background: blue;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding:1em;
}

.red, .blue:after{
  content:'';
  min-width:280px;
  flex:1;
  margin:0 1em;
}
.red {
  margin:1em;
  height: 100px;
  background: red;
  display: block;
  box-sizing: border-box;
  border: 1px solid white;
}

<section class="blue">
  <div class="red"></div>
  <div class="red"></div>
  <div class="red"></div>
  <div class="red"></div>
  <div class="red"></div>
</section>