Bagaimanakah saya boleh menyelaraskan elemen bawah dalam bekas Flexbox?

Flexbox: Elemen Jajaran Bawah

Jika anda mempunyai elemen bekas yang mengandungi elemen anak dan anda ingin menjajarkan elemen anak paling bawah menegak ke bahagian bawah bekas, model susun atur Flexbox serba boleh menawarkan penyelesaian yang berkesan.

Dalam contoh disediakan:

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

Anda mahukan reka letak berikut:

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

Memanfaatkan Margin Auto

Margin automatik terbukti menjadi alat yang mudah dalam senario ini. Sebelum proses penjajaran melalui justify-content dan align-self, sebarang ruang kosong yang tinggal diagihkan secara automatik ke margin auto dalam dimensi tersebut.

Oleh itu, anda boleh menggunakan satu atau kedua-dua peraturan CSS berikut:

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

Contoh Pelaksanaan

Menggunakan peraturan CSS yang dicadangkan, ditambah dengan bekas Flexbox dengan orientasi kolumnar, menghasilkan hasil yang diingini:

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

Atas ialah kandungan terperinci Bagaimanakah saya boleh menyelaraskan elemen bawah dalam bekas Flexbox?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!