Question

我想在屏幕顶部制作一个div棒，而不会影响其他元素，并将其子元素放在中心。

＆＃13;

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

＆＃13;

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

＆＃13;

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

修改

谢谢你们这是父母宽度的问题。但我是反应原生的，所以我无法设置width: 100%。尝试了flex: 1和align-self: stretch，两者均无效。我最终使用Dimensions来获得窗口的整个宽度，并且它起作用了。

修改

从更新版本的React Native（我带有0.49）开始，它接受width: 100%。

Answer 1

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

这意味着

如果向display: inline-flex元素添加绝对定位，它将成为块级（如display: flex），但仍会生成flex格式上下文。
< / LI>
如果向具有display: flex的元素添加绝对定位，则使用缩小到拟合算法（典型的内联级容器）而不是填充可用的算法来确定它的大小。< / p>

那就是absolutely positioning conflicts with flex children。

因为它是一个流动的，一个绝对定位的flex的孩子容器不参与flex布局。

Answer 2

你忘记了父母的宽度

＆＃13;

class A {
public:
    int x = 10;
    int y = 20;
};

void fun(A a) {
    cout << "A.x = " << a.x << endl;
    cout << "A.y = " << a.y << endl;
}

int main() {
    A a;
    fun(A{a});
    return 0;
}

＆＃13;

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

＆＃13;

Answer 3

您必须将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%;
 }

Answer 4

在我的情况下，问题是我在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>

＆＃39;位置：绝对＆＃39;与flexbox发生冲突？

4 个答案: