Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Menjajarkan Elemen ke Bahagian Bawah Bekasnya Menggunakan Flexbox?

Bagaimana untuk Menjajarkan Elemen ke Bahagian Bawah Bekasnya Menggunakan Flexbox?

Susan Sarandon
Susan Sarandonasal
2024-12-29 10:04:10561semak imbas

How to Align an Element to the Bottom of Its Container Using 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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya:AnimeArtikel seterusnya:Anime