Удалить лишнее поле после последнего дочернего элемента внутри гибкого родителя

Question

У меня есть простой родительский div с display:flex и flex-wrap:wrap с детьми, имеющими flex:1. У каждого ребенка есть изображение с фиксированной шириной 140 пикселей. Родитель должен иметь ширину 650px.

Проблема: после последнего элемента в первой строке перед краем родительского элемента есть некоторое поле. Как можно, чтобы последний дочерний элемент в каждой строке находился прямо напротив края родительского элемента, чтобы поля между каждым дочерним элементом в каждой строке были равны.

.parent { display:flex; flex-wrap: wrap; background-color:lightblue; width: 650px; }
.child { flex: 1; }
img { float:left; }

<div class="parent">
  <a class="child" href="#"><img src="http://placehold.it/140x140&text=1" /></a>
  <a class="child" href="#"><img src="http://placehold.it/140x140&text=2" /></a>
  <a class="child" href="#"><img src="http://placehold.it/140x140&text=3" /></a>
  <a class="child" href="#"><img src="http://placehold.it/140x140&text=4" /></a>
  <a class="child" href="#"><img src="http://placehold.it/140x140&text=5" /></a>
</div>

Answer 1

Как насчет установки justify-content: space-between; и удаления flex:1 для детей?

.parent {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  background-color: lightblue;
  width: 650px;
}

img {
  float: left;
}

<div class="parent">
  <a class="child" href="#"><img src="http://placehold.it/140x140&text=1" /></a>
  <a class="child" href="#"><img src="http://placehold.it/140x140&text=2" /></a>
  <a class="child" href="#"><img src="http://placehold.it/140x140&text=3" /></a>
  <a class="child" href="#"><img src="http://placehold.it/140x140&text=4" /></a>
  <a class="child" href="#"><img src="http://placehold.it/140x140&text=5" /></a>
</div>