在 flexbox 容器中均匀间隔绝对定位的元素

如何解决在 flexbox 容器中均匀间隔绝对定位的元素

在具有绝对定位子元素的元素上使用 flexBox 时 - 如果值设置为 justify-content，子元素似乎遵守 align-items 和 center 规则。就像下面的片段：

* { 
  margin: 0; 
  padding: 0; 
}
html { overflow: hidden; font-size: 0.7rem; }
body { font-family: Arial; }
section,div {
  display: flex;             /* Even though the child is absolutely positioned */
  justify-content: center;   /* The child is centered horizontally */
  align-items: center;       /* ...and the child is centered vertically */
  border-radius: 1rem; 
}
h2,section {
  width: 50%;
  margin: auto;
}
h2 {
  margin: 0.5rem auto;
  margin-top: 1rem;
  color: #444;
}
section {
  height: 10rem;
  padding: 1rem;
  background-color: #eee;
}
div {
  position: absolute; /* absolutely positioned child adheres to flexBox rules */
  width: 5rem;
  height: 5rem;
  background-color: rgba( 0,0.75 );
  color: #eee;
}

<h2>Flex-Box Parent &amp; Absolutely Positioned Child</h2>
<section class='flex-parent'>
  <div>50%</div>
</section>

FlexBox 规则似乎会影响孩子，即使它是绝对定位的，只要我们的 flexBox 值为 center。

然而，当我们的 flexBox 值是其他东西时，比如 space-between 或 space-around - 绝对定位的元素似乎完全忽略了这些 flexBox 规则。如下图：

* { 
  margin: 0; 
  padding: 0; 
}
html { overflow: hidden; font-size: 0.6125rem; }
body { font-family: Arial; }
section,div {
  display: flex;
  justify-content: space-between; /* the positioned children ignore 'space-between'*/
  align-items: center;            /* the elements are just stacked on eachother */
  border-radius: 1rem;            /* in the second section */
}
h2,section {
  width: 50%;
  margin: auto;
}
h2 {
  margin: 0.5rem auto;
  margin-top: 1rem;
  color: #444;
}
section {
  padding: 1rem;
  background-color: #eee;
}
div {
  justify-content: center;
  width: 5rem; height: 5rem;
  background-color: rgba( 0,0.75 );
  color: #eee;
}
.absolute-parent { height: 5rem; }
.absolute-parent div { position: absolute; }

<h2>Flex-Box Parent</h2>
<section class='flex-parent'>
  <div>0%</div>
  <div>25%</div>
  <div>75%</div>
  <div>100%</div>
</section>

<h2>Absolutely Positioned Children</h2>
<section class='absolute-parent'>
  <div>0%</div>
  <div>25%</div>
  <div>75%</div>
  <div>100%</div>
</section>

如何使容器中第二个 section 元素空间中的子元素均匀分布？