无涯教程网

Css 'position： absolute' 是否与 Flexbox 冲突

发布于12月08日

我想在屏幕顶部做一个div条，不影响其他元素，它的子元素在中间.

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

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

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

EDIT个

谢谢，伙计们，这是父母宽度的问题.但是我在"react 原住民"，所以我不能设定width: 100%.已try flex: 1和align-self: stretch，均不起作用.我最终使用Dimensions来获得整个窗口的宽度，并且它起作用了.

EDIT个

从React Native的较新版本(我支持0.49)开始，它接受width: 100%.

推荐答案

不，绝对定位与柔性容器不冲突.使元素成为弹性容器只影响其内部布局模型，即其内容的布局方式.定位会影响元素本身，并可能改变其在流布局中的外部角色.

也就是说

如果将绝对定位添加到带有display: inline-flex的元素，它将成为挡路级别(如display: flex)，但仍将生成灵活的格式化上下文.
如果将绝对位置添加到具有display: flex的元素，则将使用收缩到适合的算法(内联级别容器的典型)而不是填充可用算法来调整其大小.

也就是说，absolutely positioning conflicts with flex children.

因为它不在流中，所以FLEX的一个绝对定位的子级容器不参与弹性布局.

Css相关问答推荐

NextJs - Tailwind css类样式未应用于响应屏幕

无限交替css动画之间的未知延迟

设置ScaleImageButton的样式

下拉菜单未展开- bootstrap

如何将CSS动画从第一列移动到第二列？

如何取消 CSS 伪类中的属性设置？

基于高度的容器查询不起作用

Img 未拉伸以满足所需的纵横比

使用 React 和 Flexbox 文本溢出框外

将框架放入 bootstrap 模式的正确方法是什么？

使用 node-sass 在压缩文件末尾添加 min.css 文件扩展名

当页面大小小于VH时，Tailwind CSS如何使页脚留在底部

如何应用适当样式的元素加消息框？

普通流，流布局，块和内联布局有什么区别？

如何使半圆的边框淡出？

完成后如何防止css3动画重置？

弹性框中的边距折叠

为什么浏览器会为 CSS 属性创建供应商前缀？

在 react-native 中使用 flex 使项目粘在底部

在 CSS 中结合border-top、border-right、border-left、border-bottom

实用课程推荐

相关教程推荐