如何使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使父容器flex，并认为它几乎解决了它。做到了？

/* * * 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;
  }
  
  

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