Чи конфліктує "позиція: абсолютна" з Flexbox?

Я хочу зробити 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%.

Ні, абсолютно позиціонування не суперечить гнучким контейнерам. Здійснення елемента як гнучкого контейнера впливає лише на його внутрішню модель компонування, тобто спосіб викладання його вмісту. Позиціонування впливає на сам елемент і може змінити його зовнішню роль для компонування потоку.

Це означає, що

• Якщо ви додасте абсолютне позиціонування до елемента за допомогою display: inline-flex, він стане на рівні блоку (як display: flex), але все одно створить контекст гнучкого форматування.

• Якщо додати до елемента абсолютне позиціонування за допомогою display: flex, воно буде розміром, використовуючи алгоритм зменшення до розміру (типовий для контейнерів на рівні рядка) замість наявного заповнення.

Тим не менш, абсолютно позиціонуючі конфлікти з гнучкими дітьми .

Оскільки він поза потоком, абсолютно позиціонований дочірній елемент флекс-контейнера не бере участі в макеті гнучкого.

ви забули ширину батьків

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

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

Ви повинні дати 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%;
 }

У моєму випадку проблема полягала в тому, що у мене в центрі div був інший елемент із суперечливим z-індексом.

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