“立场: 绝对”与 Flexbox 冲突吗？

我想使一个 div坚持在屏幕的顶部没有任何影响其他元素，其子元素在中心。

 .parent {
display: flex;
justify-content: center;
position: absolute;
}
<div class="parent">
<div class="child">text</div>
</div>

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

剪辑

Thanks guys it's the problem of parent width. But I'm in React Native, so I can't set width: 100%. Tried flex: 1 and align-self: stretch, both not working. I ended up using 维度 to get the full width of the window and it worked.

剪辑

至于更新版本的 React Natural (我使用的是0.49) ，它接受 width: 100%。

161965 次浏览
小开

你必须给 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%;
}
小开

你忘记了父母的宽度

.parent {
display: flex;
justify-content: center;
position: absolute;
width:100%
}
<div class="parent">
<div class="child">text</div>
</div>

小开
最佳答案

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

就是说

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

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

That said, 绝对定位与灵活的孩子发生冲突.

因为它是流之外的，一个绝对定位的伸缩的孩子 容器不参与柔性布局。

小开

在我的例子中，问题是在 div 的中心有另一个元素，它的 z 索引相互冲突。

.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>


提交答案