Bagaimanakah Saya Boleh Menjajarkan Elemen ke Bahagian Bawah Bekas Menggunakan Flexbox?

Menjajarkan Elemen ke Bahagian Bawah Menggunakan Flexbox

Dalam senario yang disediakan, anda mempunyai bekas div dengan pelbagai elemen anak. Anda menyasarkan untuk mencapai reka letak di mana elemen disusun secara menegak, dengan butang sentiasa diletakkan di bahagian bawah, tanpa mengira ketinggian teks.

Flexbox menyediakan penyelesaian kepada masalah ini melalui jidar automatik. Jidar auto membolehkan pengagihan ruang yang tinggal kepada elemen dengan jidar auto sebelum penjajaran. Satu cara untuk mencapai reka letak yang diingini ialah menggunakan CSS berikut:

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

Sebagai alternatif, anda boleh menggunakan reka letak flex seperti ini:

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

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

Pendekatan ini memastikan bahawa elemen teks mengembang untuk memenuhi ketinggian yang tersedia, manakala butang ditolak ke bahagian bawah bekas.

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