Bagaimana untuk Menjajarkan Elemen ke Bahagian Bawah Bekasnya Menggunakan Flexbox?

Sejajarkan Elemen ke Bawah dengan Flexbox

Menjajarkan elemen ke bahagian bawah bekasnya boleh dicapai menggunakan Flexbox. Dalam senario ini, di mana terdapat div dengan pelbagai elemen kanak-kanak dan keinginan untuk mengekalkan elemen .butang tetap di bahagian bawah, Flexbox menawarkan penyelesaian.

Flexbox mengagihkan ruang kosong kepada "jidar auto" sebelum melakukan penjajaran menggunakan justify-content and align-self. Ini bermakna kita boleh menggunakan margin auto untuk menolak elemen .button ke bawah tanpa mengalih keluarnya daripada aliran.

Begini caranya:

Menggunakan Margin-Bottom: Auto

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

Peraturan ini menolak elemen berikut, termasuk elemen .button, ke bahagian bawah bekas.

Menggunakan Margin-Top: Auto

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

Sebagai alternatif, peraturan ini menolak elemen .button dan mana-mana elemen berikutnya ke bahagian bawah.

Untuk menunjukkan kesannya, pertimbangkan HTML berikut dan 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>

Ini akan mencipta bekas dengan ketinggian tetap, di mana elemen .button akan kekal di bahagian bawah tanpa mengira jumlah teks dalam perenggan.

Atas ialah kandungan terperinci Bagaimana untuk Menjajarkan Elemen ke Bahagian Bawah Bekasnya Menggunakan Flexbox?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!