Bagaimanakah Margin Runtuh Berbeza Antara CSS Tradisional dan Flexbox?

Margin Runtuh dalam Flexbox

Dalam CSS tradisional, apabila elemen induk dan anak terakhirnya kedua-duanya mempunyai jidar, jidar runtuh menjadi satu jidar. Walau bagaimanapun, apabila menggunakan Flexbox, gelagat runtuh ini berubah.

Dalam Flexbox, elemen dijajarkan dalam bekas fleksibel menggunakan paparan: sifat flex. Ini mewujudkan konteks pemformatan fleksibel, yang berbeza daripada konteks pemformatan blok dari segi keruntuhan jidar.

Dalam konteks pemformatan blok, jidar runtuh seperti berikut:

article {
  margin-bottom: 20px;
}

main {
  margin-bottom: 20px;
}

footer {
  margin-top: 20px;
}

<!-- Outputs a 20px margin between the last article and footer -->

Walau bagaimanapun, dalam konteks pemformatan fleksibel, margin tidak runtuh:

#container {
  display: flex;
  flex-direction: column;
}

article {
  margin-bottom: 20px;
}

main {
  margin-bottom: 20px;
}

footer {
  margin-top: 20px;
}

<!-- Outputs a 40px margin between the last article and footer -->

Perbezaan tingkah laku ini disebabkan oleh Peraturan pemformatan berasingan Flexbox. Dalam konteks fleksibel, jidar digunakan secara individu pada setiap elemen dalam bekas, menghasilkan jidar tidak runtuh.

Atas ialah kandungan terperinci Bagaimanakah Margin Runtuh Berbeza Antara CSS Tradisional dan Flexbox?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!