Kerakusan dalam Penentuan Lebar Blok Flex di CSS
Katakan kita mempunyai beberapa blok flex.
Mari kita tetapkan flex-grow
nilai 1 untuk satu daripada blok ini,
dan tetapkan lebar tertentu untuk semua elemen lain.
Hasilnya, semua blok akan mempunyai lebar tetap,
dan blok rakus pilihan kita akan mengambil
semua ruang yang tinggal:
<div class="parent">
<div class="child elem1"></div>
<div class="child elem2"></div>
<div class="child elem3"></div>
</div>
.parent {
display: flex;
width: 400px;
height: 200px;
border: 1px solid red;
}
.child {
height: 50px;
border: 1px solid green;
}
.elem1 {
width: 100px;
}
.elem2 {
flex-grow: 1;
}
.elem3 {
width: 100px;
}
:
Kesan ciri terutamanya ketara apabila lebar ibu bapa dalam peratusan. Dalam kes ini, apabila lebar ibu bapa berubah, blok rakus kita akan mempunyai lebar terapung, manakala semua blok lain akan mempunyai lebar tetap:
