Bagaimanakah Margin Berkelakuan Berbeza dalam Flexbox Berbanding dengan Reka Letak CSS Standard?

Margin Runtuh dalam Flexbox

Dalam CSS, jidar pada elemen bersebelahan lazimnya runtuh untuk mencipta jidar tunggal. Walau bagaimanapun, dalam bekas flexbox, tingkah laku ini berbeza.

Isu: Margin Bukan Flexbox lwn. Flexbox

Apabila menggunakan reka letak bukan flexbox, jidar pada elemen induk dan anak terakhirnya runtuh:

article {
  margin-bottom: 20px;
}

main {
  margin-bottom: 20px;
}

Walau bagaimanapun, dalam kotak lentur bekas:

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

article {
  margin-bottom: 20px;
}

main {
  margin-bottom: 20px;
}

Jdar tidak lagi runtuh, mengakibatkan jurang yang lebih besar antara artikel terakhir dan pengaki.

Memahami Perbezaan

Margin runtuh berlaku dalam konteks pemformatan blok. Walau bagaimanapun, bekas flexbox mencipta jenis konteks yang berbeza yang dipanggil konteks pemformatan fleksibel.

Menurut spesifikasi Model Kotak CSS:

"Bekas fleksibel mewujudkan konteks pemformatan flex baharu untuk kandungannya. Ini adalah sama seperti mewujudkan konteks pemformatan blok, kecuali reka letak fleksibel digunakan dan bukannya reka letak blok."

Dalam pemformatan fleksibel konteks, margin tidak runtuh kerana kandungan dilayan secara berbeza seperti reka letak blok biasa. Terapung tidak menceroboh ke dalam bekas fleksibel dan jidar bekas kekal berasingan daripada jidar unsur anaknya.

Atas ialah kandungan terperinci Bagaimanakah Margin Berkelakuan Berbeza dalam Flexbox Berbanding dengan Reka Letak CSS Standard?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!