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

Question 1

我想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%。

Question 2

不，绝对定位不会与flex容器冲突。将元素设置为flex容器只会影响其内部布局模型，即元素内容的布局方式。定位会影响元素本身，并且可以更改其在流布局中的外部作用。

那意味着

如果您使用将绝对定位添加到元素display: inline-flex，则它将变为块级（如display: flex），但仍会生成弹性格式上下文。
如果您使用来向元素添加绝对定位display: flex，则将使用“缩小以适合”算法（通常为内联级容器）而不是可用的填充算法调整其大小。

就是说，绝对定位与弹性孩子冲突。

由于流出，flex容器的绝对定位的子项不参与flex布局。

Question 3

你忘记了父母的宽度

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

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

展开摘要

Question 4

您必须将文字width:100%交给父母center。

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

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

展开摘要

如果您还需要垂直居中对齐，请给height:100%和align-itens: center

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

Question 5

就我而言，问题是我在div的中心有另一个元素，且z-index冲突。

.wrapper {
  color: white;
  width: 320px;
  position: relative;
  border: 1px dashed gray;
  height: 40px
}

.parent {
  position: absolute;
  display: flex;
  justify-content: center;
  top: 20px;
  left: 0;
  right: 0;
  /* This z-index override is needed to display on top of the other
     div. Or, just swap the order of the HTML tags. */
  z-index: 1;
}

.child {
  background: green;
}

.conflicting {
  position: absolute;
  left: 120px;
  height: 40px;
  background: red;
  margin: 0 auto;
}

<div class="wrapper">
  <div class="parent">
    <div class="child">
       Centered
    </div>
  </div>
  <div class="conflicting">
    Conflicting
  </div>
</div>

展开摘要