如何使flexbox均匀地分配项目而不会使兄弟姐妹错位？

Question

我正在尝试从《龙珠》中重新制作龙珠。我需要使用flexbox在“球”的中心均匀分布星星，并且需要将球居中放置到父容器中。问题是，当具有4个或更多星星的球紧接在具有较少星星的球旁边时，与前一个球相比，4颗星的球会上移并对齐。星星必须在球内垂直和水平居中。无论球在父div中的顺序如何，都必须从顶部开始将球对齐。

.circulo_iconos{
        width: 8em;
        height: 8em;
        border: 1pt solid black;
        text-align: center;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
    }
    .circulo_iconos .fa{
        font-size: 2em;
    }
    .circulo_iconos .fa.fa-star{
        color: yellow;
    }

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
  <div id="tiene_circulos">
    	<div class="circulo_iconos" data-number="1">
    		<span class="fa fa-fw fa-star"></span>
    	</div>
    	<div class="circulo_iconos" data-number="2">
    		<span class="fa fa-fw fa-star"></span>
    		<span class="fa fa-fw fa-star"></span>
    	</div>
    	<div class="circulo_iconos" data-number="3">
    		<span class="fa fa-fw fa-star"></span>
    		<span class="fa fa-fw fa-star"></span>
    		<span class="fa fa-fw fa-star"></span>
    	</div>
    	<div class="circulo_iconos" data-number="4">
    		<span class="fa fa-fw fa-star"></span>
    		<span class="fa fa-fw fa-star"></span>
    		<br />
    		<span class="fa fa-fw fa-star"></span>
    		<span class="fa fa-fw fa-star"></span>
    	</div>
    	<div class="circulo_iconos" data-number="5">
    		<span class="fa fa-fw fa-star"></span>
    		<span class="fa fa-fw fa-star"></span>
    		<span class="fa fa-fw fa-star"></span>
    		<span class="fa fa-fw fa-star"></span>
    		<span class="fa fa-fw fa-star"></span>
    	</div>
    	<div class="circulo_iconos" data-number="6">
    		<span class="fa fa-fw fa-star"></span>
    		<span class="fa fa-fw fa-star"></span>
    		<span class="fa fa-fw fa-star"></span>
    		<span class="fa fa-fw fa-star"></span>
    		<span class="fa fa-fw fa-star"></span>
    		<span class="fa fa-fw fa-star"></span>
    	</div>
    </div>

Answer 1

我只用flex-wrap使父容器屈曲，并认为几乎可以解决它。是吗？

etc

/* * * I only added this * * */  
#tiene_circulos {
  display:flex;
  flex-wrap:wrap;
}

.circulo_iconos{
      width: 9em;
      height: 9em;
      border: 1pt solid black;
      text-align: center;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      /*But it would look even better with those 2 lines below I think ^^*/     
      /* padding: 1em;
      margin:1em;*/
  }
  .circulo_iconos .fa{
      font-size: 2em;
  }
  .circulo_iconos .fa.fa-star{
      color: yellow;
  }