Mengapa Margin Flexbox Berkelakuan Berbeza Daripada dalam Konteks Pemformatan Blok Standard?

Margin Runtuh dalam Flexbox

Lazimnya, dalam CSS, apabila ibu bapa dan anak terakhirnya mempunyai jidar, jidar runtuh menjadi satu margin. Walau bagaimanapun, dalam flexbox, jidar berkelakuan berbeza.

Mengapa Margin Runtuh Berbeza dalam Flexbox

Margin runtuh ialah ciri konteks pemformatan blok, yang tidak digunakan dalam konteks pemformatan yang fleksibel. Flexbox mewujudkan konteks pemformatan flex baharu untuk kandungannya, bermakna jidar tidak runtuh dengan cara yang sama seperti dalam konteks pemformatan blok.

Cara Membuat Margin Flexbox Berkelakuan Seperti Bukan Flexbox

Memandangkan margin runtuh ialah ciri konteks pemformatan blok, tidak mungkin untuk membuat margin flexbox berkelakuan sama seperti bukan flexbox. Walau bagaimanapun, adalah mungkin untuk mencapai kesan yang sama dengan menetapkan sifat paparan bekas flexbox kepada inline-flex dan bukannya flex. Ini akan mewujudkan konteks pemformatan flexbox, tetapi ia akan dianggap sebagai elemen sebaris, dan dengan itu margin akan runtuh seperti yang dijangkakan.

Sebagai contoh:

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

article {
  margin-bottom: 20px;
}

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

footer {
  background: skyblue;
}

Dalam kes ini, jidar akan runtuh antara artikel terakhir dan pengaki, menghasilkan jidar 20px, sama seperti dalam reka letak bukan kotak fleksibel.

Atas ialah kandungan terperinci Mengapa Margin Flexbox Berkelakuan Berbeza Daripada dalam Konteks Pemformatan Blok Standard?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!