position:absolute与flexbox搭配使用时justify-content失效问题求助

问题根因 #

• 你遇到的布局异常和「绝对定位与flex冲突」无关，核心问题是position: absolute的元素默认宽度为收缩适配内容宽度：没有显式指定宽度时，容器宽度刚好等于内部两个子元素的总宽度，justify-content: space-between没有可用的剩余空间来实现两端对齐，自然就出现了两张图片紧挨在一起的效果。
• 移除绝对定位后，flex容器恢复为块级元素默认占满父级宽度的特性，space-between就可以正常生效。

兼容多屏幕的解决方案 #

不需要设置固定像素宽度，只要给绝对定位的flex容器补充宽度规则即可：

<!-- 先给两个div的共同父容器加position: relative -->
<div style="position: relative;">
  <div style="display:flex;justify-content:space-between;position:absolute;z-index: -1; width: 100%; left: 0; top: 0;">
      <div>FOO</div>
      <div>BAR</div>
  </div>
  <div>
      SOME TEXT
  </div>
</div>

关键修改说明 #

• 给共同父容器加position: relative：让绝对定位的flex容器以父容器为基准定位，宽度百分比也会参考父容器宽度计算。
• 给绝对定位的flex容器加width: 100%：让容器占满父容器宽度，提供足够的剩余空间给justify-content: space-between实现两端对齐。
• 补充left: 0、top: 0：明确绝对定位的起始坐标，避免不同浏览器默认偏移差异，你可以根据实际覆盖位置需求调整这两个值。

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