Wie kann ich Flex-Elemente vertikal statt horizontal ausrichten?

Flex-Elemente vertikal ausgerichtet halten

Wenn Sie Flexbox zum Zentrieren von Elementen verwenden, ist es manchmal frustrierend, wenn die Elemente horizontal statt vertikal gestapelt sind. Dieses Problem tritt auf, wenn die Flex-Elemente einen natürlichen Inline-Fluss haben, z. B. Text oder Bilder.

Problem:

Bedenken Sie den folgenden Codeausschnitt:

.inner {
  display: flex;
  align-items: center;
  justify-content: center;
}

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

Die Absicht besteht darin, sowohl das orangefarbene Quadrat als auch den Text innerhalb des .inner-Containers zu zentrieren. In der Ausgabe werden jedoch das Quadrat und der Text nebeneinander angezeigt, wobei der Text zur Hälfte abgeschnitten ist.

Lösung:

Um dieses Verhalten zu korrigieren, benötigen wir um die Biegerichtung des Innenbehälters zu ändern. Standardmäßig zeigt Flexbox seine untergeordneten Elemente horizontal an. Damit sie vertikal gestapelt werden, setzen wir die Eigenschaft „Flex-Richtung“ auf „Spalte“.

.inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

Dieses aktualisierte Code-Snippet erzwingt die vertikale Ausrichtung der Flex-Elemente und löst so das Problem der Stapelung nebeneinander.

Aktualisierte Ausgabe:

Das orangefarbene Quadrat erscheint nun wie ursprünglich vorgesehen über dem Text. Dies ist eine nützliche Technik, wenn Sie sicherstellen möchten, dass bestimmte Elemente innerhalb eines Flex-Containers auf eine bestimmte Weise ausgerichtet bleiben.

Das obige ist der detaillierte Inhalt vonWie kann ich Flex-Elemente vertikal statt horizontal ausrichten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!