我想让一个 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%
。
最佳答案
不会,绝对定位与 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.
关于css - 'position: absolute' 是否与 Flexbox 冲突?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41033245/