我想做一个div
粘在屏幕顶部,不影响其他元素,其子元素位于中间。
.parent {
display: flex;
justify-content: center;
position: absolute;
}
<div class="parent">
<div class="child">text</div>
</div>
当我添加position: absolute
line, justify-content: center
变得无效。它们相互冲突吗?解决方案是什么?
EDIT
谢谢大家,这是父宽度的问题。但我在React Native中,所以无法设置width: 100%
. Tried flex: 1
and align-self: stretch
,两者都不起作用。我最终使用了方面 https://facebook.github.io/react-native/docs/dimensions.html获得窗口的完整宽度并且它起作用了。
EDIT
从较新版本的 React Native(我使用的是 0.49)开始,它接受width: 100%
.
不,绝对定位与弹性容器不冲突。将一个元素设置为 Flex 容器只会影响其内部布局模型,即其内容的布局方式。定位会影响元素本身,并且可以改变其在流布局中的外部角色。
这意味着
也就是说,绝对定位与 Flex 子项冲突 https://www.w3.org/TR/css-flexbox-1/#abspos-items.
由于它是流出的,所以是 Flex 的绝对定位子代
容器不参与弹性布局。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)