Adakah Flexbox Menghapuskan Margin Runtuh?

Margin Runtuh dalam Flexbox

Dalam CSS, apabila ibu bapa dan anak terakhirnya kedua-duanya mempunyai jidar, jidar tersebut runtuh menjadi satu jidar. Walau bagaimanapun, tingkah laku ini berubah apabila menggunakan flexbox.

Dalam flexbox, margin tidak runtuh. Ini bermakna jidar pada elemen induk item fleksibel (mis., bekas fleksibel) tidak akan digabungkan dengan jidar pada item fleksibel itu sendiri. Ini boleh mengakibatkan jarak yang tidak diingini antara elemen dalam reka letak flexbox.

Sebagai contoh, pertimbangkan CSS berikut:

article {
  margin-bottom: 20px;
}

main {
  background: pink;
  margin-bottom: 20px;
}

footer {
  background: skyblue;
}

Dalam contoh ini, kami mempunyai elemen artikel bersarang di dalam elemen utama , yang seterusnya bersarang di dalam elemen pengaki. Tanpa flexbox, margin pada artikel dan margin pada utama akan runtuh menjadi margin tunggal 20px antara artikel dan footer. Walau bagaimanapun, dengan flexbox, kami mendapat margin 40px antara artikel dan pengaki—margin penuh 20px dari artikel ke utama dan 20px lagi dari utama ke pengaki.

Untuk mengelakkan tingkah laku ini, kami boleh mengalih keluar susun atur kotak flex daripada elemen bekas. Contohnya:

#container {
  display: block;
}

Dengan menetapkan sifat paparan elemen kontena untuk disekat, kami mengalih keluar konteks pemformatan flexbox dan memulihkan gelagat keruntuhan margin lalai.

Atas ialah kandungan terperinci Adakah Flexbox Menghapuskan Margin Runtuh?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!