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

Question

我正在尝试重新创建龙珠中的龙珠。我需要使用 flexbox 将星星均匀分布在 "ball" 的中心，并且我需要将球居中放置在父容器中。问题是，当有 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>

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

How to make flexbox distribute items evenly without misalignment of siblings?

css

centering

flexbox