Mengapa Margin Kanan Item Terakhir Runtuh dalam Flexbox dan Reka Letak Grid?

Mengatasi Margin Runtuh dalam Flexbox dan Reka Letak Grid

Apabila menyusun item dalam senarai mendatar menggunakan flexbox atau susun atur grid, anda mungkin menghadapi isu di mana margin kanan item terakhir runtuh. Ini berlaku disebabkan oleh gelagat yang wujud pada reka letak ini.

Potensi Isu #1: Salah Tafsiran Harta Limpahan

Pada mulanya, nampaknya sifat limpahan tersebut menyebabkan keruntuhan margin . Walau bagaimanapun, sifat limpahan terpakai hanya pada kawasan kandungan, bukan pada padding atau margin. Oleh itu, ia tidak boleh menjadi punca utama.

Potensi Isu #2: Ketidakkonsistenan Gelagat Penyemak Imbas

Dalam kes tertentu, terutamanya di luar konteks pemformatan flexbox atau grid, yang terakhir margin nampaknya dikekalkan. Ini menunjukkan bahawa gelagat penyemak imbas mungkin tidak konsisten dan limpahan itu boleh meluas hingga ke jidar dan pelapik dalam beberapa konteks.

Penyelesaian Kemungkinan:

• Gunakan Negatif Margin: Tambahkan jidar negatif ke sebelah kanan item terakhir untuk memaksanya menjauhi tepi bekas itu. Walau bagaimanapun, pendekatan ini mungkin tidak berfungsi secara konsisten merentas semua penyemak imbas.
• Masukkan Item Pemegang Tempat: Cipta item kosong (tanpa kandungan kelihatan) selepas item terakhir untuk menyerap sebarang jidar yang runtuh. Ini memastikan tiada unsur aktif secara visual terjejas oleh keruntuhan.
• Buat Bekas Pembalut Baharu: Letakkan item dalam bekas anak baharu, kemudian tambah jidar di sebelah kanan induk bekas. Ini mengasingkan keruntuhan jidar dalam bekas dalam.

Contoh Menggunakan Margin Negatif:

li:last-child {
  margin-right: -30px;
}

Contoh Menggunakan Item Pemegang Tempat:

• Item 1
• Item 2
• Item 3
• Item 4

Contoh Menggunakan Pembalut Baharu Bekas:

.container {
  margin-right: 30px;
}

.inner-container {
  display: flex;
  flex-direction: row;
}

Atas ialah kandungan terperinci Mengapa Margin Kanan Item Terakhir Runtuh dalam Flexbox dan Reka Letak Grid?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!