Wie kann ich mit Flexbox Elemente am Boden eines Containers ausrichten?

Elemente mit Flexbox nach unten ausrichten

Im bereitgestellten Szenario haben Sie einen Div-Container mit verschiedenen untergeordneten Elementen. Sie möchten ein Layout erreichen, bei dem die Elemente vertikal gestapelt sind und die Schaltfläche unabhängig von der Höhe des Texts immer unten positioniert ist.

Flexbox bietet eine Lösung für dieses Problem durch automatische Ränder. Automatische Ränder ermöglichen die Verteilung des verbleibenden Platzes auf Elemente mit automatischen Rändern vor der Ausrichtung. Eine Möglichkeit, das gewünschte Layout zu erreichen, ist die Verwendung des folgenden CSS:

p { margin-bottom: auto; } /* Push following elements to the bottom */
a { margin-top: auto; } /* Push it and following elements to the bottom */

Alternativ können Sie ein Flex-Layout wie dieses verwenden:

.content {
  height: 200px;
  border: 1px solid;
  display: flex;
  flex-direction: column;
}
h1, h2 {
  margin: 0;
}
a {
  margin-top: auto;
}

<div class="content">
  <h1>heading 1</h1>
  <h2>heading 2</h2>
  <p>Some text more or less</p>
  <a href="/" class="button">Click me</a>
</div>

Dieser Ansatz stellt dies sicher Die Textelemente werden erweitert, um die verfügbare Höhe auszufüllen, während die Schaltfläche an den unteren Rand des Containers gedrückt wird.

Das obige ist der detaillierte Inhalt vonWie kann ich mit Flexbox Elemente am Boden eines Containers ausrichten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!