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

Verhindern Sie, dass Flex-Elemente nebeneinander angezeigt werden

Flexbox bietet eine effektive Möglichkeit, Elemente innerhalb eines Blocks auszurichten. Wenn Sie jedoch auf ein Szenario stoßen, in dem die Elemente vertikal statt horizontal angezeigt werden sollen, kann das standardmäßige Flex-Verhalten ein Hindernis sein.

Problemstellung:

Trotz Wenn Sie Flexbox verwenden, um Elemente in einem Block zu zentrieren, werden die Elemente weiterhin nebeneinander angezeigt. Das gewünschte Ergebnis besteht darin, dass jedes Element eine eigene Zeile einnimmt. Das orangefarbene Quadrat sollte beispielsweise über dem Text liegen, aber Flex hat es neben dem Text neu positioniert.

Lösung:

Der Schlüssel zur Lösung dieses Problems liegt indem wir den folgenden Stil hinzufügen:

.inner {
  flex-direction: column;
}

Durch die Angabe von „Spalte“ als Flex-Richtung weisen wir die Flexbox an, ihre untergeordneten Elemente vertikal anzuzeigen. Dadurch wird das Problem behoben und die Elemente wie vorgesehen positioniert.

Aktualisierter Snippet:

<div class="container">
  <div class="inner">
    <div class="square"></div>

    <p>some text</p>
  </div>
</div>

<style>
  .container {
    ...
  }

  .inner {
    ...
    flex-direction: column;
  }

  .square {
    ...
  }
</style>

Wenn die Eigenschaft „flex-direction“ auf „column“ gesetzt ist, wird die Flexbox-Elemente werden jetzt in Reihen angezeigt, wodurch das ursprüngliche Problem der Positionierung nebeneinander behoben wird.

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!