Wie kann ich verhindern, dass Flex-Elemente nebeneinander gerendert werden, anstatt vertikal gestapelt zu werden?

Verhindern, dass Flex-Elemente nebeneinander gerendert werden

Bei der Verwendung von Flexbox stoßen wir häufig auf Situationen, in denen wir Elemente in einem zentrieren möchten Block, aber jedes Element belegt eine eigene Zeile. Leider verschiebt Flexbox manchmal Elemente beiseite, wenn wir sie untereinander positionieren möchten.

Betrachten Sie die folgende HTML-Struktur, bei der ein orangefarbenes Quadrat und ein Textelement mithilfe von Flexbox mit Justify-Content in einem Container platziert werden: Center und align-items: center:

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

Und das zugehörige CSS:

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

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

Beim Anwenden von Flexbox wird das orangefarbene Quadrat angezeigt. Anstatt über dem Text positioniert zu werden, landet es seitlich. Um dies zu beheben, müssen wir die Flex-Direction-Eigenschaft des inneren Containers ändern:

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

Das Festlegen von „Flex-Direction: Column“ weist die Flexbox an, ihre untergeordneten Elemente vertikal untereinander und nicht in einer Reihe anzuzeigen . Dieses Verhalten entspricht unserer Anforderung, das orangefarbene Quadrat über dem Text zu platzieren.

Das obige ist der detaillierte Inhalt vonWie kann ich verhindern, dass Flex-Elemente nebeneinander gerendert werden, anstatt vertikal gestapelt zu werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!