私は #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要素）
編集：
私はこの問題に関して別の質問を見つけ、結果なしで解決策を試しました： フレックスコンテナの絶対配置されたアイテムは、IEとFirefoxではまだアイテムとして扱われます
それは相対的なFirefoxとIEのバグのようです （私は現在、Firefox 47を実行していますが、Chromiumで動作します）。
最終編集：
私は主題に関する私の研究を押し進め、多くの疑問を見つけました 関連する （複製）：
回答 @Oriolで フレックスレイアウトのjustify-contentから固定位置付けの要素を除外する
そして、 Bugzilla.
回答：
回答№1は4あなたが発見したように、絶対に配置されたフレックスアイテムは、 justify-content いくつかのブラウザでは、通常のフローから削除する必要があるにもかかわらず計算が行われます。
仕様で定義されているとおり：
それが流出しているので、フレックスの絶対的に配置された子供 コンテナはフレックスレイアウトに参加しません。
しかし、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>他の回答に記載されている回避策を認識しているにもかかわらず、あなたが XY問題.
私の理解は、あなたが1つのフレックスアイテムをボトムアライメントしたいが、コンテナの中央に垂直に別のアイテムを持っていることです。まあ、絶対にこれを行う必要はありません。
第3のフレックスアイテムとして機能する目に見えない擬似要素を使用することができます。このアイテムは、下部に整列されたDOM要素との釣り合いを取って、中央のアイテムを中央に維持します。
ここに詳細があります：
- センターおよびボトムアライメントフレックスアイテム
- Flexのアイテムを整列する方法 （ボックス62および66参照）
回答№2については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の値を中央に変更します。今はうまくいくと思っています。