Gunakan sifat anjal dengan betul untuk menyarang bekas anjal

Question

Saya menghadapi beberapa isu menggunakan flexbox dengan betul dan ingin mendapatkan penjelasan tentang sarang elemen induk dan anak.

Saya tahu bahawa unsur anak mewarisi sifat lentur unsur induk, tetapi apakah yang berlaku kepada unsur keturunan selanjutnya (cth. "cucu"? Apakah penggunaan flexbox yang betul dalam kes ini?

Dalam erti kata lain, adakah saya perlu menggunakan paparan: flex kepada elemen kanak-kanak juga, untuk digunakan pada elemen kanak-kanak? Adakah ini akan mengatasi sifat flex bagi elemen induk elemen anak pertama?

.parent-container {
  paparan: flex;
  lentur: 1 0 100%;
  warna latar belakang: kuning;
}
.bekas kanak-kanak {
  lentur: 1 1 50%;
  warna latar belakang: biru;
}
.bekas bayi-anak-anak {
  lentur: 1 1 50%;
  warna latar belakang: hijau;
}

<div class='parent-container'>
  <div class='bekas kanak-kanak'>
    <div class='bekas bayi-anak-anak'>kanak-kanak</div>
    <div class='bekas bayi-anak-anak'>kanak-kanak</div>
  </div>
  <div class='bekas kanak-kanak'>
    <div class='bekas bayi-anak-anak'>kanak-kanak</div>
    <div class='bekas bayi-anak-anak'>kanak-kanak</div>
  </div>
</div>

Answer 1

Skop konteks pemformatan fleksibel terhad kepada hubungan ibu bapa-anak.

Ini bermakna bekas flex sentiasa menjadi ibu bapa dan barangan flex sentiasa anak-anak. Sifat fleksibel hanya berfungsi dalam hubungan ini.

Keturunan bekas flex yang melebihi paras kanak-kanak tidak tergolong dalam susun atur flex dan tidak akan menerima atribut flex.

Untuk menerapkan sifat fleksibel kepada anak-anak, anda sentiasa perlu memohon display: flex或display: inline-flex kepada ibu bapa.

Sesetengah sifat lentur hanya digunakan pada bekas lentur (cth. justify-content、flex-wrap和flex-direction），而某些flex属性仅适用于flex项目（例如align-self、flex-grow和flex).

Namun, barang flex juga boleh menjadi bekas flex. Dalam kes ini, elemen boleh menerima semua sifat flex. Memandangkan setiap harta menjalankan fungsi yang berbeza, tiada konflik dalaman dan tiada apa yang perlu ditindih.