Растянуть блоки по ширине Flexbox

Question

Есть ряд блоков, которые должны размещаться по всей ширине родителя по очереди. Но если этих блоков будет 5шт, то пятый блок будет прижиматься к правой стене(по примеру который добавил ниже).

.content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 200px;
  height: 150px;
  border: 2px solid green;
}

.items {
  width: 50px;
  height: 50px;
  background-color: blue;
  border: 1px solid red;
}

<div class="content">
<div class="items"> Item1 </div>
<div class="items"> Item2 </div>
<div class="items"> Item3 </div>
<div class="items"> Item4 </div>
<div class="items"> Item5 </div>
</div>

Сам вопрос заключается в том, что нужно что-бы 5й блок вставал по середине, сразу после 4, как это будет если задать justify-content: start;, но блоки по прежнему должны растягиваться по всей ширине родителя. В общем условно говоря мне нужно объединить два этих параметра.

Answer 1

Можно воспользоваться и таким приёмом, если заранее известно сколько блоков в одной линии

.content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 200px;
  height: 150px;
  border: 2px solid green;
}

.content>*:last-child{
  display: none;
  width: 50px;
}

.content>*:last-child:nth-child(3n){
  display: block;
}

.items {
  width: 50px;
  height: 50px;
  background-color: blue;
  border: 1px solid red;
}

<div class="content">
<div class="items"> Item1 </div>
<div class="items"> Item2 </div>
<div class="items"> Item3 </div>
<div class="items"> Item4 </div>
<div class="items"> Item5 </div>
<div></div>
</div>

Answer 2

Можно использовать недавно появившийся gap для флексов и не использовать justify-content

 * {
   box-sizing: border-box;
 }

.content {
  display: flex;
  align-content: start;
  flex-wrap: wrap;
  row-gap: 10px;
  column-gap: 23px;
  width: 200px;
  height: 150px;
  border: 2px solid green;
}

.items {
  width: 50px;
  height: 50px;
  background-color: blue;
  border: 1px solid red;
}

<div class="content">
<div class="items"> Item1 </div>
<div class="items"> Item2 </div>
<div class="items"> Item3 </div>
<div class="items"> Item4 </div>
<div class="items"> Item5 </div>
</div>

БЛОГ НА HUSL

Растянуть блоки по ширине Flexbox

Ответы (2 шт):