Css 如何将一系列跨度标记制作成均匀使用100%宽度的柔性框？

我目前有：

每个圆都在一个跨度内。如何使用flexbox，使3个圆跨距占父DIV的100%，并均匀分布

鉴于：

html:

---

您需要将flex css应用于并重新组织您的SCS

这是编译后的输出

.rate mod[name=skill\u id\u 1]{ 边框：1px实心E0E6F1； 填充：0 5px 0； 背景：-webkit线性梯度左，ED5351，EDAB51，00C644； 背景：-moz线性梯度左，ED5351，EDAB51，00C644； 背景：-o-线性梯度左，ED5351，EDAB51，00C644； 背景：向右线性梯度，ED5351，EDAB51，00C644； 显示器：flex； 弯曲方向：行！重要； } .费率模块跨度{ 弹性：100； 背景：红色； } 项目

---

注意：我已经厌倦了让flexbox工作，但它不需要，我在这里做错了什么？谢谢

<div class="form-group">
    <label>Item</label>
    <div class="rate-mod"><span name="skill_id_1" value=""><span style="cursor: pointer; display: inline-block; position: relative;"><span style="display: inline-block; border-radius: 50%; border: 5px double white; width: 30px; height: 30px; background-color: rgb(204, 204, 204);"></span><span style="display: inline-block; position: absolute; overflow: hidden; top: 0px; left: 0px; width: 0%;"><span style="display: inline-block; border-radius: 50%; border: 5px double white; width: 30px; height: 30px; background-color: black;"></span></span>
        </span><span style="cursor: pointer; display: inline-block; position: relative;"><span style="display: inline-block; border-radius: 50%; border: 5px double white; width: 30px; height: 30px; background-color: rgb(204, 204, 204);"></span><span style="display: inline-block; position: absolute; overflow: hidden; top: 0px; left: 0px; width: 0%;"><span style="display: inline-block; border-radius: 50%; border: 5px double white; width: 30px; height: 30px; background-color: black;"></span></span>
        </span><span style="cursor: pointer; display: inline-block; position: relative;"><span style="display: inline-block; border-radius: 50%; border: 5px double white; width: 30px; height: 30px; background-color: rgb(204, 204, 204);"></span><span style="display: inline-block; position: absolute; overflow: hidden; top: 0px; left: 0px; width: 0%;"><span style="display: inline-block; border-radius: 50%; border: 5px double white; width: 30px; height: 30px; background-color: black;"></span></span>
        </span>
        </span>
    </div>
</div>

.rate-mod {
  border: 1px solid #E0E6F1;
  padding: 0 0 5px 0;
  background: linear-gradient(90deg, #ED5351, #EDAB51, #00C644);
  display: flex;
  flex-direction: row!important;

  span span {
    flex-grow: 1;
    background: red;
  }

}