'position：absolute'はFlexboxと競合しますか？

Question 1

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

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

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

スニペットを展開

position: absolute行を追加するjustify-content: centerと無効になります。それらは互いに競合しますか、そして、解決策は何ですか？

編集

みんなありがとう、それは親の幅の問題です。しかし、私はReact Nativeを使用しているため、設定できませんwidth: 100%。しようとしましたflex: 1とalign-self: stretch、両方が動作していません。結局、Dimensionsを使用してウィンドウの全幅を取得し、それが機能しました。

編集

React Nativeの新しいバージョン（私は0.49を使用しています）の時点で、を受け入れますwidth: 100%。

Question 2

いいえ、絶対的な配置はフレックスコンテナと競合しません。要素をフレックスコンテナにすることは、その内部レイアウトモデル、つまり、そのコンテンツのレイアウト方法にのみ影響します。配置は要素自体に影響を与え、フローレイアウトの外側の役割を変更する可能性があります。

つまり、

を使用して要素に絶対配置を追加するとdisplay: inline-flex、ブロックレベル（のようにdisplay: flex）になりますが、フレックスフォーマットコンテキストは生成されます。
を使用して要素に絶対配置を追加するとdisplay: flex、使用可能な塗りつぶしではなく、縮小してフィットするアルゴリズム（通常はインラインレベルのコンテナー）を使用してサイズが変更されます。

とはいえ、絶対的なポジショニングはフレックスの子と競合します。

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

Question 3

親の幅を忘れてしまった

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

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

スニペットを展開

Question 4

あなたはテキストwidth:100%を親に与える必要がcenterあります。

 .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%;
 }

Question 5

私の場合、問題は、divの中央に競合するz-indexを持つ別の要素があることでした。

.wrapper {
  color: white;
  width: 320px;
  position: relative;
  border: 1px dashed gray;
  height: 40px
}

.parent {
  position: absolute;
  display: flex;
  justify-content: center;
  top: 20px;
  left: 0;
  right: 0;
  /* This z-index override is needed to display on top of the other
     div. Or, just swap the order of the HTML tags. */
  z-index: 1;
}

.child {
  background: green;
}

.conflicting {
  position: absolute;
  left: 120px;
  height: 40px;
  background: red;
  margin: 0 auto;
}

<div class="wrapper">
  <div class="parent">
    <div class="child">
       Centered
    </div>
  </div>
  <div class="conflicting">
    Conflicting
  </div>
</div>

スニペットを展開