it-swarm.com.de

Widerspricht Position: Absolut der Flexbox?

Ich möchte, dass ein div am oberen Bildschirmrand bleibt, ohne dass andere Elemente beeinflusst werden, und sein untergeordnetes Element in der Mitte.

 .parent {
   display: flex;
   justify-content: center;
   position: absolute;
 }
<div class="parent">
  <div class="child">text</div>
</div>

Wenn ich die Zeile position: absolute Hinzufüge, wird justify-content: center Ungültig. Widersprechen sie sich und was ist die Lösung?

[~ # ~] edit [~ # ~]

Danke Jungs, es ist das Problem der Elternbreite. Aber ich bin reaktionsfähig und kann daher nicht width: 100% Setzen. 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.

[~ # ~] edit [~ # ~]

Ab der neueren Version von React Native (I'm with 0.49)) akzeptiert es width: 100%.

56
Stanley Luo

Nein, die absolute Positionierung widerspricht nicht den Flex-Containern. Wenn Sie ein Element zu einem flexiblen Container machen, wirkt sich dies nur auf das innere Layoutmodell aus, dh auf die Art und Weise, wie der Inhalt des Elements angeordnet wird. Die Positionierung wirkt sich auf das Element selbst aus und kann seine äußere Rolle für das Flow-Layout ändern.

Das bedeutet, dass

  • Wenn Sie einem Element mit display: inline-flex Eine absolute Positionierung hinzufügen, wird es blockiert (wie display: flex), Generiert aber dennoch einen Flex-Formatierungskontext.

  • Wenn Sie einem Element mit display: flex Eine absolute Positionierung hinzufügen, wird die Größe mit dem für Container auf Inline-Ebene typischen Auffüllalgorithmus anstelle des verfügbaren berechnet.

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.

61
Oriol

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>
21
Shivkumar kondi

Sie müssen dem übergeordneten Element width:100% Für 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 die Ausrichtung auch vertikal zentrieren müssen, geben Sie height:100% Und align-itens: center Ein.

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