Chamtivost u flex bloků s určenou šířkou v CSS
Předpokládejme, že máme několik flex bloků.
Jednomu z těchto bloků nastavme flex-grow
na hodnotu 1 a všem ostatním prvkům
- určitou šířku. Výsledkem bude,
že všechny bloky budou mít pevnou šířku,
a náš vyvolený chamtivý blok bude zabírat
veškerý zbývající dostupný prostor:
<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;
}
:
Charakteristický efekt je obzvláště patrný, když je šířka rodiče v procentech. V tomto případě při změně šířky rodiče bude náš chamtivý blok mít plovoucí šířku, zatímco všechny ostatní - pevnou:
