“位置：绝对”与flexbox冲突吗？ [英] Does 'position: absolute' conflict with flexbox?

问题描述

$ b

我想在屏幕的顶部制作一个div，而不会对其他元素产生任何影响， snippetdata-lang =jsdata-hide =falsedata-console =truedata-babel =false>

  .parent {display：flex; justify-content：center;位置：绝对; }  

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

当我添加位置：绝对行时， justify-content：center 变得无效。他们是否相互冲突，有什么解决方法？



编辑



谢谢你们，这是父宽度的问题。但是我在反应原生，所以我不能设置宽度：100％。试过 flex：1 和 align-self：stretch ，两者都不起作用。我结束了使用维度来获得窗口的整个宽度和它工作。



编辑

截至更新版本的React Native 'm与0.49），它接受宽度：100％。

解决方案

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

这意味着

$ ul

如果将绝对定位添加到 display：inline-flex 的元素，它将成为块级别（如 display：flex ），但仍然会生成一个flex格式化上下文。

code> display：flex ，它将使用适合缩小的算法（内联级容器的典型算法）而不是可用填充算法来调整大小。

也就是说，绝对定位与flex儿童冲突。

由于流量不足，一个flex
容器的一个绝对定位的孩子不参与flex布局。

I want to make a div stick on the top of the screen without any influence to other elements, and its child element in the center.

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

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

When I add the position: absolute line, justify-content: center becomes invalid. Do they conflict with each other and, what's the solution?

EDIT

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 Dimensions to get the full width of the window and it worked.

EDIT

As of newer version of React Native (I'm with 0.49), it accepts width: 100%.

解决方案

No, absolutely positioning does not conflict with flex containers. Making an element be a flex container only affects its inner layout model, that is, the way in which its contents are laid out. Positioning affects the element itself, and can alter its outer role for flow layout.

That means that

• If you add absolute positioning to an element with display: inline-flex, it will become block-level (like display: flex), but will still generate a flex formatting context.

• If you add absolute positioning to an element with display: flex, it will be sized using the shrink-to-fit algorithm (typical of inline-level containers) instead of the fill-available one.

That said, 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.

这篇关于“位置：绝对”与flexbox冲突吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！