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>

Answer 2

Вам нужно отдельное правило CSS для изображения внутри .child div. Затем переместите свойства, нацеленные на изображение, в это новое правило:

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

Я добавил несколько правил flexbox в .child div, чтобы центрировать изображение внутри .child. Теперь .child div'ы просто касаются деления пространства, поэтому всегда есть 4 поперек, и стилизация изображений не зависит от этого.

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

.child {
  flex: 0 0 25%;
  
  /*for aligning image inside .child */
  display: flex;
  justify-content: center;
}

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

<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>