Cara menggunakan flexbox untuk mencipta rentang berdasarkan lebar kandungan
P粉726234648
2023-08-15 12:26:13
<p>Saya telah menggunakan span dan div dalam elemen induk baris lentur lebar tetap</p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">.parent {
paparan: flex;
flex-direction: baris;
lebar: 230px;
warna latar belakang: biru;
}
.anak1 {
warna latar belakang: merah;
}
.kanak2 {
lebar min: 40px;
}</pre>
<pre class="brush:html;toolbar:false;"><div class="parent">
<span class="child1">Ini ialah beberapa teks dalam span</span>
<div class="child2"/>
</div></pre>
<p><br /></p>
<p>Saya mahu rentang sentiasa sama lebar dengan teks dan div untuk mengambil keseluruhan baki lebar elemen induk. Sekarang (seperti yang anda boleh lihat dalam coretan kod), apabila teks bergerak ke baris baharu, kawasan latar belakang merah lebih luas daripada teks. Bagaimana untuk membetulkan kod ini? Saya memerlukan latar belakang merah untuk tamat tepat di tepi teks</p>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Mungkin anda boleh menetapkan
parentkepada grid dan menggunakan unit fr untuk pengukuran?Ini akan menjadikan bekas teks sama lebar dengan teks dan menjadikan bekas yang tinggal mengambil 1 bahagian daripada ruang yang tinggal (tiada bekas lain akan mengambil 100% ruang).
Untuk paparan baris, cuma tukar lajur kepada baris.