如何在不影响其兄弟姐妹的位置的情况下在柔性盒内绝对定位div？

Question

我有一个#text内部弯曲,#container并希望绝对定位在它下面的东西:

如何计算兄弟姐妹的弹性定位？

#container{
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
  position: relative;
  width: 95vw;
  height: 95vh;
  border: 1px solid black
}
#text{
  font-size: 13px;
  width: 50vw;
  text-align: justify;
}
#absolute{
  position: absolute;
  bottom: 5px;
  left: calc(47.5vw - 25px);
  width: 50px;
  text-align: center;
  color: red;
}

<div id="container">
  <div id="text">
    "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga."
  </div>
  <div id="absolute">
    Absolutly
  </div>
</div>

你会注意到它#text的中心位于父母的中心位置,如果可能的话,我希望它完全垂直居中而不需要修改:

• 节点树

• 已编写的flex属性(如justify-content多个.text元素的情况)

编辑:

我在这个问题上找到了另一个问题,尝试了没有结果的解决方案:Flex容器中的绝对定位项目仍被视为IE和Firefox中的项目

它似乎是相对的Firefox和IE错误 (我目前正在运行Firefox 47,它适用于Chromium.)

最终编辑:

我推动了我对该主题的研究,发现了许多相关的问题(重复):

• 绝对定位干扰Firefox中的flexbox定位

• 绝对定位的Flex项目未在Firefox中从正常流程中删除

• Firefox中的Flexbox:项目排列不正确

• 回答 @Oriol 从flex布局中的justify-content中排除具有固定定位的元素

并直接链接到Bugzilla.

Answer 1

正如您所发现的那样,绝对定位的弹性项目会影响justify-content某些浏览器的计算,尽管它应该从正常流程中删除.

如规范中所定义:

4.1.绝对定位的Flex儿童

由于它不在流动状态,Flex容器的绝对定位子元素不参与flex布局.

然而,在Firefox和IE11中,绝对定位的弹性项目在与对齐方面就像普通兄弟一样justify-content.

这是一个例子.它适用于当前的Chrome,Safari和Edge,但在Firefox和IE11中失败.

flex-container {
  display: flex;
  justify-content: space-between;
  position: relative;
  background-color: skyblue;
  height: 100px;
}
flex-item {
  background: lightgreen;
  width: 100px;
}
[abspos] {
  position: absolute;
  z-index: -1;
}

<flex-container>
  <flex-item>item 1</flex-item>
  <flex-item>item 2</flex-item>
  <flex-item abspos>item 3</flex-item>
</flex-container>

jsFiddle版本

虽然您了解其他答案中发布的变通方法,但我会建议您在遇到XY问题时采用其他方法.

我的理解是你想要底部对齐一个弹性项目,但是另一个项目在容器中垂直居中.嗯,你不一定需要绝对定位.

您可以使用不可见的伪元素作为第三个flex项.此项目将作为底部对齐DOM元素的平衡,并保持中间项目居中.

以下是详细信息:

• 居中和底部对齐弹性项目
• 对齐Flex项目的方法(见方框62和66)