Bagaimanakah Saya Boleh Menjajarkan Elemen ke Bahagian Bawah Bekas Flexbox?

Menjajarkan Elemen ke Bahagian Bawah dengan Flexbox

Dalam senario di mana bekas div diisi dengan elemen anak, termasuk tajuk, perenggan, dan butang, adalah wajar untuk menjajarkan butang ke bahagian bawah bekas tanpa mengira jumlah teks dalam perenggan. Penjajaran ini boleh dicapai dengan berkesan menggunakan Flexbox.

Untuk mencapai penjajaran bawah ini menggunakan margin auto, seseorang boleh menggunakan CSS berikut:

p { margin-bottom: auto; }

Arahan ini menolak semua elemen berikut ke bahagian bawah bekas itu. Sebagai alternatif, butang itu sendiri boleh disasarkan menggunakan:

a { margin-top: auto; }

Ini menggesa butang dan elemen seterusnya untuk ditolak ke bawah.

Dalam bekas div, sifat Flexbox ditetapkan sebagai berikut:

.content {
  display: flex;
  flex-direction: column;
}

Tetapan ini mewujudkan reka letak lajur untuk elemen anak dalam bekas. Tajuk kekurangan nilai jidar untuk mengelakkan jarak antara elemen berturut-turut. Jidar auto pada butang memastikan ia berada di kedudukan bawah secara konsisten.

Dengan melaksanakan pelarasan penggayaan ini, reka letak yang diingini boleh dicapai, dengan butang dilekatkan pada bahagian bawah bekas tanpa mengira kandungan teks yang berbeza-beza dalam perenggan.

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