Gierigheid by gespesifiseerde wydte van flex blokke in CSS
Kom ons het verskeie flex blokke.
Laat ons aan een van hierdie blokke flex-grow
op die waarde 1 stel, en aan al die ander elemente
- 'n sekere wydte. Die gevolg sal wees
dat al die blokke 'n vaste wydte sal hê,
en ons uitverkore gierige blok sal
al die oorblywende beskikbare spasie inneem:
<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;
}
:
Die kenmerkende effek is veral merkbaar wanneer die ouer se wydte in persentasie is. In hierdie geval, met die verandering van die ouer se wydte, sal ons gierige blok 'n wisselende wydte hê, en al die ander - 'n vaste:
