Czy konflikt "pozycja: absolutny z flexbox?

Question

Chcę zrobić patyk div na górze ekranu bez wpływu na inne elementy i jego element potomny w środku.

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

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

Kiedy dodać linię position: absolute, justify-content: center staje się nieważny. Czy są ze sobą w konflikcie i jakie jest rozwiązanie?

EDIT

Dzięki chłopaki to problem szerokości nadrzędnej. Ale jestem w natywnym języku, więc nie mogę ustawić width: 100%. Wypróbowałem flex: 1 i align-self: stretch, obie nie działają. Skończyło się na użyciu Dimensions, aby uzyskać pełną szerokość okna i zadziałało.

EDIT

W nowszej wersji React Native (jestem z 0,49), akceptuje width: 100%.

Answer 1

Nie, absolutne pozycjonowanie nie powoduje konfliktu z elastycznymi pojemnikami. Tworzenie elementu jako elastycznego kontenera wpływa tylko na jego wewnętrzny model układu, czyli sposób, w jaki jego zawartość jest ułożona. Pozycjonowanie wpływa na sam element i może zmienić jego zewnętrzną rolę dla układu przepływu.

Oznacza to, że

• Jeśli dodać pozycjonowanie bezwzględne do elementu z display: inline-flex, stanie się on na poziomie bloków (jak display: flex), ale nadal będzie generować flex kontekst formatowania.

• Jeśli dodasz pozycjonowanie bezwzględne do elementu o numerze display: flex, zostanie on zwymiarowany za pomocą algorytmu dopasowującego dopasowywanie (typowego dla kontenerów śródliniowych) zamiast wypełnienia.

To powiedziawszy, absolutely positioning conflicts with flex children.

Jak to jest out-of-przepływu, absolutnie położenie dzieckiem Flex pojemniku nie uczestniczy w układzie Flex.

Answer 2

Musisz podać width:100% rodzicowi na center tekst.

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

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

Jeśli trzeba także centrum wyrównane, dać height:100% i align-itens: center

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

Answer 3

zostały zapomniane szerokości rodzica

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

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