Kiedy zaczynamy pracę z Flexbox często wydaje nam się, że zasady jego działania będą takie same jak w przypadku tradycyjnego CSS. Jednak to nie do końca jest prawda. Często przekonujemy się o tym w ciężki sposób kiedy odkrywamy np. że nie możemy ustawić szerokości kolumn w % a i stała w px coś szwankuje. Jest tak dlatego, że elementy mają odgórnie taką samą szarość (wysokość w wielu przypadkach również).
I tu przydatny okaże się flex-grow. Za jego pomocą możemy wpływać na szerokość elementów. Wygląda to następująco:
See the Pen flex-grow by Aura (@Julka85) on CodePen.dark
Właściwość tą również umieszczamy na konkretnym elemencie np:
<div class="flex-container">
<div style="flex-grow:1;">1 kol</div>
<div style="flex-grow:3;">2 kol</div>
<div style="flex-grow:2;">3 kol</div>
<div style="flex-grow:8;">4 kol</div>
</div>
Jak widać jest to kolejna właściwość, która zamiast bardzo skomplikowanego nazewnictwa wartości stosuje zwykłe numery.