Wie kann ich Flex-Artikel vertikal ausrichten?

Flex-Elemente vertikal ausrichten

Flexbox bietet eine praktische Möglichkeit, Elemente innerhalb eines Containers anzuordnen. Allerdings kann es manchmal zu Problemen kommen, wenn Elemente nebeneinander und nicht in der gewünschten vertikalen Reihenfolge gerendert werden. Dies kann bei Verwendung von display: flex auftreten.

Um zu verhindern, dass Flex-Elemente nebeneinander gerendert werden, fügen Sie einfach den folgenden Stil zum übergeordneten Element hinzu:

Diese Direktive weist die Flexbox an, ihre untergeordneten Elemente in Spalten anzuzeigen Zeilen.

Beispiel:

Im bereitgestellten Codeausschnitt:

Zunächst werden die Elemente „Quadrat“ und „etwas Text“ angezeigt nebeneinander platziert werden. Um dies zu beheben, fügen Sie das folgende CSS hinzu:

Dadurch wird sichergestellt, dass das „Quadrat“ über dem „some text“-Element positioniert wird, wodurch das gewünschte vertikale Layout erreicht wird.

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