'Konum: mutlak' Flexbox ile çelişiyor mu?

divDiğer unsurları ve merkezdeki alt unsurunu etkilemeden ekranın üst kısmına bir çubuk yapmak istiyorum .

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

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

position: absoluteSatırı eklediğimde justify-content: centergeçersiz oluyor. Birbirleriyle çatışıyorlar mı ve çözüm nedir?

DÜZENLE

Teşekkürler çocuklar, bu ebeveyn genişliği sorunu. Ama React Native'deyim, bu yüzden ayarlayamıyorum width: 100%. Denedim flex: 1ve align-self: stretchikisi de çalışmıyor. Pencerenin tam genişliğini elde etmek için Boyutlar'ı kullandım ve işe yaradı.

DÜZENLE

React Native'in yeni sürümünden itibaren (0.49 ile birlikteyim) kabul ediyor width: 100%.

Hayır, kesinlikle konumlandırma esnek kaplarla çakışmaz. Bir öğeyi esnek bir kap yapmak, yalnızca iç mizanpaj modelini, yani içeriğinin yerleştirilme şeklini etkiler. Konumlandırma, öğenin kendisini etkiler ve akış düzeni için dış rolünü değiştirebilir.

Bu şu demek oluyor

• İle bir öğeye mutlak konumlandırma eklerseniz display: inline-flex, blok düzeyinde (gibi display: flex) olur, ancak yine de bir esnek biçimlendirme bağlamı oluşturur.

• İle bir öğeye mutlak konumlandırma eklerseniz display: flex, doldurulabilir olan yerine sığdırmak için daralt algoritması (satır içi düzey kaplar için tipik) kullanılarak boyutlandırılacaktır.

Bununla birlikte , kesinlikle esnek çocuklarla çatışmaları konumlandırmak .

Akış dışı olduğu için, bir esnek kabın kesinlikle konumlandırılmış bir çocuğu, esnek yerleşim düzenine katılmaz.

ebeveyn genişliğini unuttun

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

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

Metni width:100%ebeveyne vermelisin center.

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

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

Dikey olarak da ortaya hizalamanız gerekiyorsa, ver height:100%vealign-itens: center

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

Benim durumumda sorun, div'in merkezinde çelişen bir z-endeksine sahip başka bir öğenin olmasıydı.

.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>