'position: absolute' 是否与 Flexbox 冲突？

Question

我想做一个 div 贴在屏幕顶部而不影响其他元素，并且它的子元素在中心。

  .parent {
   display: flex;
   justify-content: center;
   position: absolute;
 }

 <div class="parent">
  <div class="child">text</div>
</div>

当我添加 position: absolute 行时， justify-content: center 变得无效。它们是否相互冲突，解决方案是什么？

编辑

谢谢大家，这是父宽度的问题。但是我在 React Native 中，所以我不能设置 width: 100% 。试过 flex: 1 和 align-self: stretch ，都不起作用。我最终使用 Dimensions 来获得窗口的整个宽度并且它起作用了。

编辑

对于较新版本的 React Native（我使用的是 0.49），它接受 width: 100% 。

原文由 Stanley Luo 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

不，绝对定位与弹性容器不冲突。让一个元素成为一个弹性容器只会影响它的内部布局模型，即它的内容的布局方式。定位会影响元素本身，并且可以改变其在流布局中的外部角色。

这意味着

• 如果使用 display: inline-flex 向元素添加绝对定位，它将变为块级（如 display: flex ），但仍会生成 flex 格式化上下文。

• 如果您使用 display: flex 将绝对定位添加到元素，它将使用收缩匹配算法（典型的内联级容器）而不是可用填充算法调整大小。

也就是说， 绝对定位与 flex children 冲突。

由于它是外流的，因此 flex 容器的绝对定位子级不参与 flex 布局。

原文由 Oriol 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

你忘记了父母的宽度

 .parent {
   display: flex;
   justify-content: center;
   position: absolute;
   width:100%
 }

 <div class="parent">
  <div class="child">text</div>
</div>

原文由 Shivkumar kondi 发布，翻译遵循 CC BY-SA 3.0 许可协议