Как сделать так, чтобы flexbox распределял предметы равномерно, без смещения братьев и сестер?

Question

Я пытаюсь воссоздать шары дракона из Dragon Ball.Мне нужно распределить звезды равномерно по центру «шара», используя 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 и думаю, что в значительной степени это решило.Неужели?

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