Widerspricht 'position: absolute' der Flexbox?

Ich möchte einen divStick 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: absoluteZeile hinzufüge , justify-content: centerwird 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: 1und align-self: stretchbeide 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%.

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 (wie display: 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 .

Ein absolut positioniertes Kind eines Flex-Containers nimmt nicht am Flex-Layout teil, da es nicht im Fluss ist.

Sie haben die Breite des Elternteils vergessen

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

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

Sie müssen dem Text das width:100%übergeordnete centerElement geben.

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

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

Wenn Sie auch vertikal zentrieren müssen, geben Sie height:100%undalign-itens: center

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

In meinem Fall war das Problem, dass ich ein anderes Element in der Mitte des Div mit einem widersprüchlichen Z-Index hatte.

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