在 flex 父元素内的最后一个子元素之后删除额外的边距答案

【问题标题】：Remove extra margin after last child element inside of flex parent在 flex 父元素内的最后一个子元素之后删除额外的边距
【发布时间】：2020-05-27 00:03:08
【问题描述】：

我有一个简单的父 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>

【问题讨论】：

标签： css flexbox

【解决方案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>

【讨论】：