html - 隐式计算弹性项目之间的空格？

Question

我有一个包含 3 个弹性项目的弹性容器，需要在最后一个项目上放置一个绝对定位的 div。并添加一个效果，使其左侧填充正好是 flex-items 之间空间的一半。我通过明确计算值来解决它。我想知道 calc 是否可以简化，但要避免减去父子宽度之和的部分。 如果有一些属性可以为您提供 flex 容器中的空白值？

或者有没有更好的方法来达到同样的效果。

*{
  padding:0px;
  border:0px;
  box-sizing:border-box;
}
.parent{

  width:200px;
  height:20px;
  display:flex;
  justify-content:space-between;
  position:relative;
}
.child{
  font-size:14px;
  width:50px;
  height:100%;
  background-color:blue;
}
.pop-over{
  box-sizing:content-box;
  width:50px;
  height:120%;
  position:absolute;
  right:0;
  top:0;
  background-color:red;
  opacity:.5;
  padding-left:calc((100% - 150px) / 4)
}

<div class="parent">
  <div class="child">
Child
  </div>
  <div class="child">
    Child
  </div>
   <div class="child">
     Child
  </div>
  <div class="pop-over">
  </div>
</div>

标签： htmlcssflexboxwhitespacepadding