css - '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%。

Answer 1

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

也就是说

• 如果您使用 display: inline-flex 向元素添加绝对定位，它将变为 block 级(如 display: flex)，但会仍然生成一个 flex 格式化上下文。

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

也就是说，absolutely positioning conflicts with flex children .

As it is out-of-flow, an absolutely-positioned child of a flex container does not participate in flex layout.