Wie kann ich Elemente in einem Flexbox-Container unten ausrichten?

Flexbox: Unten ausgerichtete Elemente

Wenn Sie ein Containerelement haben, das untergeordnete Elemente enthält, und Sie das unterste untergeordnete Element ausrichten möchten senkrecht zum Behälterboden bietet das vielseitige Flexbox-Grundrissmodell eine effektive Lösung.

Im Beispiel Vorausgesetzt:

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

Sie möchten das folgende Layout:

-------------------
| heading 1          |
| heading 2          | 
| paragraph text     |
| can have many      |
| rows               |
|                   |
|                   |
|                   | 
| link-button        |
-------------------

Automatische Ränder nutzen

Automatische Ränder erweisen sich als praktisches Werkzeug in dieses Szenario. Vor dem Ausrichtungsprozess durch justify-content und align-self wird der verbleibende freie Platz automatisch auf automatische Ränder in dieser Dimension verteilt.

Daher können Sie eine oder beide der folgenden CSS-Regeln anwenden:

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

Beispielimplementierung

Anwenden der vorgeschlagenen CSS-Regeln, gekoppelt mit einem Flexbox-Container mit einer Spalte Orientierung führt zum gewünschten Ergebnis:

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

Das obige ist der detaillierte Inhalt vonWie kann ich Elemente in einem Flexbox-Container unten ausrichten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!