web-dev-qa-db-ja.com

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

画面の上部にdivを貼り付けて、他の要素やその子要素に影響を与えないようにします。

 .parent {
   display: flex;
   justify-content: center;
   position: absolute;
 }
<div class="parent">
  <div class="child">text</div>
</div>

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

編集

みんなありがとう、それは親の幅の問題だ。しかし、反応ネイティブなので、width: 100%を設定できません。 flex: 1とalign-self: stretchを試しましたが、両方とも機能していません。最終的に Dimensions を使用してウィンドウの幅全体を取得し、機能しました。

編集

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

cssreact-nativeflexbox
56
Stanley Luo

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

つまり

  • display: inline-flexを使用して要素に絶対配置を追加すると、ブロックレベル（display: flexなど）になりますが、それでもフレックスフォーマットコンテキストが生成されます。

  • display: flexを使用して要素に絶対配置を追加すると、fill-availableアルゴリズムの代わりに、シュリンクフィットアルゴリズム（インラインレベルコンテナーの典型）を使用してサイズが設定されます。

つまり、 フレックスの子との絶対的な位置の競合 。

アウトオブフローであるため、フレックスコンテナの絶対位置の子はフレックスレイアウトに参加しません。

61
Oriol

親の幅を忘れました

.parent {
   display: flex;
   justify-content: center;
   position: absolute;
   width:100%
 }
<div class="parent">
  <div class="child">text</div>
</div>
21
Shivkumar kondi

centerテキストの親にwidth:100%を指定する必要があります。

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