“位置：绝对”与 Flexbox 冲突吗？

我想做一个div粘在屏幕顶部，不影响其他元素，其子元素位于中间。

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

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

当我添加position: absolute线，justify-content: center变得无效。

EDIT

谢谢大家，这是父宽度的问题。width: 100%。flex: 1和align-self: stretch，两者都不起作用。方面获得窗口的完整宽度并且它起作用了。

EDIT

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

答案

不，绝对定位与弹性容器不冲突。

这意味着

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

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

也就是说，绝对定位与 Flex 子项冲突。

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

来自: stackoverflow.com