Steht 'position: absolute' Konflikt mit der flexbox?

Question

Ich möchte einen div-Stick auf der Oberseite des Bildschirms ohne Einfluss auf andere Elemente, und seine Kind-Element in der Mitte.

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

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

Als ich hinzufügen, die position: absolute Linie wird justify-content: center ungültig. Konflikt sie miteinander und was ist die Lösung?

EDIT

Danke Jungs, es ist das Problem der Mutterbreite. Aber ich bin in Reaktion-nativ, also kann ich width: 100% nicht einstellen. Versucht flex: 1 und align-self: stretch, beide nicht funktioniert. Ich habe am Ende Dimensions verwendet, um die volle Breite des Fensters zu bekommen, und es hat funktioniert.

EDIT

Ab neuere Version der Native reagieren (Ich bin mit 0,49), übernimmt es width: 100%.

Answer 1

Nein, absolutes Positionieren steht nicht im Widerspruch zu Flex-Containern. Wenn ein Element zu einem flexiblen Container wird, wirkt sich dies nur auf sein inneres Layoutmodell aus, dh auf die Art und Weise, in der seine Inhalte angeordnet sind. Positionierung wirkt sich auf das Element selbst aus und kann seine äußere Rolle für das Flusslayout ändern.

Das bedeutet, dass

• Wenn Sie mit display: inline-flex zu einem Element der absoluten Positionierung hinzufügen, wird es auf Blockebene (wie display: flex) geworden, aber immer noch eine Flex-Formatierungskontext erzeugen.

• Wenn Sie einem Element mit display: flex die absolute Positionierung hinzufügen, wird die Größe mithilfe des Shrink-to-Fit-Algorithmus (typisch für Inline-Level-Container) anstelle des Fill-Available-Algorithmus bestimmt.

Das sagte, absolutely positioning conflicts with flex children.

Da es out-of-flow ist, nimmt ein absolut positioniertes Kind eines Flex-Containers nicht am Flex-Layout teil.

Answer 2

Sie müssen width:100% dem übergeordneten center den Text geben.

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

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

Wenn Sie auch vertikal ausrichten zu zentrieren müssen, geben height:100% und align-itens: center

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

Answer 3

Sie Eltern vergessen Breite haben

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

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