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略高于父母的中心，如果可能的话，我希望完全垂直居中而不修改：

节点树
已编写的弹性属性（如果是多个justify-content元素，则为.text）

编辑：

我在这个问题上找到了另一个问题，尝试了没有结果的解决方案：Absolute positioned item in a flex container still gets considered as item in IE & Firefox

这似乎是一个火狐和IE的相对错误 （我目前正在运行Firefox 47，它适用于Chromium。）

最终编辑：

我推动了我对该主题的研究，发现了很多与相关的问题（重复）：

与Bugzilla的直接链接。

Answer 1

正如您所发现的，在某些浏览器中，绝对定位的弹性项目会计入justify-content计算，尽管它应该从正常流程中删除。

如规范中所定义：

4.1. Absolutely-Positioned Flex Children

因为它是一个流动的，一个绝对定位的flex的孩子   容器不参与flex布局。

然而，在Firefox和IE11中，绝对定位的flex项在与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 version

虽然您已了解其他答案中发布的变通方法，但如果您遇到XY problem，我会建议您采用其他方法。

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

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

以下是详细信息：

Center and bottom-align flex items
Methods for Aligning Flex Items（见方框62和66）

Answer 2

#container{
  display: flex;
  align-items: center;
  justify-content: center;
  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>

将justify-content的值更改为center。希望它现在有效。

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

编辑：

最终编辑：

2 个答案: