'position：absolute'はflexboxと競合していますか？

Question

他の要素や中央の子要素に影響を与えずに、画面の上部にdivスティックを作りたいと思います。

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

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

私はjustify-content: centerが無効になるposition: absolute行を追加します。彼らはお互いに葛藤していますか？解決策は何ですか？

EDIT

みんなありがとう、それは親の幅の問題です。しかし、私は反応ネイティブなので、私はwidth: 100%を設定することはできません。試しましたflex: 1とalign-self: stretch、両方が動作していません。私は窓の全幅を得るためにDimensionsを使用して終わり、それは働いた。リアクトネイティブ（私は0.49とよ）の新しいバージョンのよう

EDIT

、それはwidth: 100%を受け入れます。

Answer 1

いいえ、絶対配置はフレックスコンテナと競合しません。要素をフレックスコンテナにすることは、その内部レイアウトモデル、つまりその内容がレイアウトされる方法にのみ影響します。配置は要素自体に影響を与え、フローレイアウトの外側の役割を変更することができます。あなたはdisplay: inline-flexを持つ要素に絶対位置を追加した場合、それはブロックレベル（のようなdisplay: flex）となりますが、それでもフレックスの書式コンテキストを生成します

• ことを意味

  。

• display: flexの要素に絶対配置を追加すると、塗りつぶし可能ではなく、インラインレベルのコンテナの典型的な縮小適合アルゴリズムを使用してサイズが調整されます。

つまり、absolutely positioning conflicts with flex childrenとなります。

フレックスの絶対配置された子であるflex コンテナの絶対配置された子は、フレックスレイアウトに参加しません。

Answer 2

width:100%を親にcenterのテキストに付ける必要があります。あなたはまた、縦方向に中央揃えする必要がある場合は

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

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

、親

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

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

の height:100%と align-itens: center

.parent { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    position: absolute; 
    width:100%; 
    height: 100%; 
} 

Answer 3

あなたが忘れてしまったの幅を与えます