为何Flexbox属性能让不参与布局的绝对定位子元素居中？

所谓“绝对定位的flex容器子元素不参与flex布局”，准确的含义是：这类元素不会被纳入flex的空间分配机制——不会和其他flex子元素争抢容器空间，也不会响应flex-grow/flex-shrink/flex-basis这类控制flex布局的核心属性。但这并不代表它完全不受flex容器对齐属性的影响。

你的代码里子元素能实现居中，核心逻辑是：

• 绝对定位元素在未设置top/right/bottom/left偏移属性时，会保持它的静态位置——也就是如果它是position: static（默认定位方式）时应该处于的位置。
• 当这个元素作为flex子元素时，它的静态位置会由flex容器的justify-content和align-items属性计算得出——也就是静态定位下会被容器居中。
• 因为你没有给子元素设置任何定位偏移，它就停留在了这个由flex对齐规则算出的静态位置上，看起来像是被flex属性直接居中了。

你可以做个测试：给子元素加上top: 0; left: 0，它会立刻跑到容器左上角，完全不受flex对齐属性的影响，这才是它“不参与flex布局”的直观体现：

.child{
  position: absolute;
  top: 0;
  left: 0;
  height:20px;
  width: 20px;
  background-color: blue;
}

额外补充：如果给flex容器加上position: relative，它会成为绝对定位子元素的包含块，但这和flex对齐属性的影响无关——不管容器是不是包含块，只要没设置定位偏移，子元素都会保持由flex规则计算出的静态位置。

内容的提问来源于stack exchange，提问作者woe jone