Wie richtet man ein Element mithilfe von Flexbox am Boden seines Containers aus?

Element mit Flexbox am Boden ausrichten

Das Ausrichten eines Elements am Boden seines Containers kann mit Flexbox erreicht werden. In diesem Szenario, in dem es ein Div mit verschiedenen untergeordneten Elementen gibt und der Wunsch besteht, ein .button-Element am unteren Rand festzuhalten, bietet Flexbox eine Lösung.

Flexbox verteilt freien Speicherplatz auf „Auto-Ränder“, bevor die Ausrichtung mit durchgeführt wird justify-content und align-self. Das bedeutet, dass wir automatische Ränder verwenden können, um das .button-Element nach unten zu verschieben, ohne es aus dem Fluss zu entfernen.

So wird es gemacht:

Margin-Bottom verwenden: Auto

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

Diese Regel verschiebt die folgenden Elemente, einschließlich des .button-Elements, an den unteren Rand des Container.

Margin-Top verwenden: Automatisch

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

Alternativ verschiebt diese Regel das .button-Element und alle nachfolgenden Elemente nach unten.

Um den Effekt zu demonstrieren, berücksichtigen Sie das folgende HTML und CSS:

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

Dadurch wird ein erstellt Container mit einer festen Höhe, in dem das .button-Element unabhängig von der Textmenge im Absatz unten bleibt.

Das obige ist der detaillierte Inhalt vonWie richtet man ein Element mithilfe von Flexbox am Boden seines Containers aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!