Ich möchte einen div
Stick oben auf dem Bildschirm erstellen, ohne Einfluss auf andere Elemente und das untergeordnete Element in der Mitte zu haben.
.parent {
display: flex;
justify-content: center;
position: absolute;
}
<div class="parent">
<div class="child">text</div>
</div>
Wenn ich die position: absolute
Zeile hinzufüge , justify-content: center
wird sie ungültig. Widersprechen sie sich und was ist die Lösung?
BEARBEITEN
Danke Jungs, es ist das Problem der Elternbreite. Aber ich bin in React Native, also kann ich nicht einstellen width: 100%
. Versucht flex: 1
und align-self: stretch
beide funktionieren nicht. Am Ende habe ich Dimensions verwendet , um die volle Breite des Fensters zu erhalten, und es hat funktioniert.
BEARBEITEN
Ab der neueren Version von React Native (ich bin mit 0.49) akzeptiert es width: 100%
.
css
react-native
flexbox
Stanley Luo
quelle
quelle
Antworten:
Nein, die absolute Positionierung steht nicht im Widerspruch zu Flex-Containern. Ein Element zu einem Flex-Container zu machen, wirkt sich nur auf sein inneres Layoutmodell aus, dh auf die Art und Weise, wie sein Inhalt angeordnet ist. Die Positionierung wirkt sich auf das Element selbst aus und kann seine äußere Rolle für das Flusslayout ändern.
Das bedeutet, dass
Wenn Sie einem Element mit eine absolute Positionierung hinzufügen
display: inline-flex
, wird es auf Blockebene (wiedisplay: flex
), generiert jedoch weiterhin einen Flex-Formatierungskontext.Wenn Sie einem Element mit eine absolute Positionierung hinzufügen
display: flex
, wird die Größe mithilfe des Algorithmus zum Verkleinern (typisch für Container auf Inline-Ebene) anstelle des verfügbaren Füllungsalgorithmus angepasst.Das heißt, absolut Positionierungskonflikte mit flexiblen Kindern .
quelle
Sie haben die Breite des Elternteils vergessen
quelle
Sie müssen dem Text das
width:100%
übergeordnetecenter
Element geben.Wenn Sie auch vertikal zentrieren müssen, geben Sie
height:100%
undalign-itens: center
quelle
In meinem Fall war das Problem, dass ich ein anderes Element in der Mitte des Div mit einem widersprüchlichen Z-Index hatte.
quelle