Wie kann verhindert werden, dass Flex-Elemente nebeneinander angezeigt werden?

Verhindern, dass Flex-Elemente nebeneinander gerendert werden

Problem:

Wenn Sie Flexbox verwenden, um Elemente innerhalb eines Blocks zu zentrieren, Es kommt häufig vor, dass Elemente nebeneinander und nicht vertikal untereinander angezeigt werden. Dies kann in bestimmten Situationen unerwünscht sein.

Lösung:

Um zu verhindern, dass Flex-Elemente nebeneinander gerendert werden, implementieren Sie den folgenden CSS-Stil:

.inner {
  flex-direction: column;
}

Erklärung:

Diese Stileigenschaft gibt die Richtung an, in der Flex-Elemente innerhalb der angeordnet sind Containerelement. Indem Sie die Flexrichtung auf „Spalte“ festlegen, weisen Sie die Flexbox an, ihre untergeordneten Elemente in Zeilen statt in Spalten anzuzeigen. Dadurch werden die Elemente wie gewünscht vertikal untereinander ausgerichtet.

Aktualisiertes Beispiel:

Der folgende aktualisierte Codeausschnitt zeigt, wie diese Lösung funktioniert:

<div class="container">
  <div class="inner">
    <div class="square"></div>
    <p>some text</p>
  </div>
</div>

.container {
  height: 200px;
  width: 200px;
  background: cornflowerblue;
  position: relative;
}

.inner {
  height: 100%;
  position: absolute;
  left: 0;
  width: 100%;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.square {
  width: 30px;
  height: 30px;
  background: tomato;
  display: block;
}

Durch die Verwendung von „Flex-Direction: Column“ werden das orangefarbene Quadrat und der Text jetzt korrekt vertikal innerhalb des Containerelements gestapelt, wie z beabsichtigt.

Das obige ist der detaillierte Inhalt vonWie kann verhindert werden, dass Flex-Elemente nebeneinander angezeigt werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!