css - Flexbox 在不改变子元素宽度的情况下限制每行的元素

Question

我用 Flexbox 创建了一个布局。我有一个父元素设置为 display:flex 和最多 7 个子元素。我想做的是配置它，使每行最多只有 4 个子元素。所以在有 7 个子元素的情况下，第一行有 4 个，第二行有 3 个，全部居中。这是我尝试过的:

.parent {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
}
  .child {
    width:65px;
    height:65px;
    border-radius:50%;
    overflow:hidden;
    flex:0 0 25%;
  }

<div class="container">
  <div class="parent">
    <div class="child"><img src="http://placehold.it/200x200" /></div>
    <div class="child"><img src="http://placehold.it/200x200" /></div>
    <div class="child"><img src="http://placehold.it/200x200" /></div>
    <div class="child"><img src="http://placehold.it/200x200" /></div>
    <div class="child"><img src="http://placehold.it/200x200" /></div>
    <div class="child"><img src="http://placehold.it/200x200" /></div>
    <div class="child"><img src="http://placehold.it/200x200" /></div>
  </div>
</div>

这几乎可以正常工作，除了 65px 的宽度被忽略了。我怎样才能做到不超过宽度，并且两行中的子元素之间的间距相同？

Answer 1

考虑一个隐藏的元素，它将在第一行和第二行之间分开并使其成为 width:100% 然后简单地使用 space-around 或 space-evenly

.parent {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.child {
  width: 65px;
  height: 65px;
  border-radius: 50%;
  overflow: hidden;
}

.parent:before {
  content: "";
  width:100%;
  order: 1;
}

.child:nth-child(n + 5) {
  order: 2;
}

<div class="container">
  <div class="parent">
    <div class="child"><img src="http://placehold.it/200x200" /></div>
    <div class="child"><img src="http://placehold.it/200x200" /></div>
    <div class="child"><img src="http://placehold.it/200x200" /></div>
    <div class="child"><img src="http://placehold.it/200x200" /></div>
    <div class="child"><img src="http://placehold.it/200x200" /></div>
    <div class="child"><img src="http://placehold.it/200x200" /></div>
    <div class="child"><img src="http://placehold.it/200x200" /></div>
  </div>
</div>