Gunakan sifat anjal dengan betul untuk menyarang bekas anjal
P粉369196603
2023-08-24 11:43:49
<p>Saya menghadapi beberapa isu menggunakan flexbox dengan betul dan ingin mendapatkan penjelasan tentang sarang elemen induk dan anak. </p>
<p>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? </p>
<p>Dalam erti kata lain, adakah saya perlu menggunakan <kod>paparan: flex</code> kepada elemen kanak-kanak juga, untuk digunakan pada elemen kanak-kanak? Adakah ini akan mengatasi sifat flex bagi elemen induk elemen anak pertama? </p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">.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;
}</pre>
<pre class="brush:html;toolbar:false;"><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></pre>
<p><br /></p>
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.