Gdy budujesz elastyczny układ strony i chcesz, aby dwie kolumny rosły w różnych tempie, kluczem jest świadome ustawienie współczynnika rozciągania. Wyobraź sobie prosty kontener z dwoma elementami potomnymi: pierwszy ma rosnąć dwa razy szybciej niż drugi. W tym celu nadajesz pierwszemu elementowi wartość dwa, a drugiemu jeden. Przeglądarka oblicza wtedy wolną przestrzeń i dzieli ją proporcjonalnie do sumy tych wartości, czyli w stosunku dwa do jednego. Pierwszy element otrzyma dwie trzecie wolnego miejsca, drugi jedną trzecią. Pamiętaj, że właściwość flex-grow działa wyłącznie na wolną przestrzeń, która pozostaje po uwzględnieniu bazowych rozmiarów elementów. Jeśli elementy mają już własną szerokość, proporcja dotyczy tylko nadwyżki, a nie całkowitej szerokości. Dlatego często warto ustawić im zbliżoną lub zerową bazę, na przykład przez flex-basis: 0, aby proporcja była czytelna i przewidywalna.Aby uzyskać powtarzalny efekt, zadbaj o kilka szczegółów. Po pierwsze, ustaw elementom wspólny kontekst, czyli kontener z display: flex oraz kierunkiem poziomym. Po drugie, nadaj obu elementom flex-basis równy zero i minimalną szerokość równą zero, aby zawartość ich nie rozpychała. Dopiero wtedy przypisz flex-grow o wartościach dwa i jeden. Dzięki temu nawet przy zmianie rozmiaru okna stosunek pozostanie stały. Jeśli chcesz, aby drugi element miał gwarantowaną minimalną szerokość, użyj min-width, ale pamiętaj, że wtedy przy bardzo wąskim ekranie proporcja może się zaburzyć, bo element nie może być węższy niż jego minimum. W praktyce warto testować układ przy szerokościach skrajnych: bardzo małej i bardzo dużej. W pierwszym przypadku sprawdzasz, czy nic się nie nachodzi, w drugim czy proporcja nie powoduje nadmiernego rozciągnięcia jednego z bloków.Pamiętaj też o różnicy między rosnąć a kurczyć się. Właściwość flex-grow odpowiada tylko za rozdzielanie nadwyżki, a nie za ochronę przed zbyt małą szerokością. Jeśli chcesz mieć pełną kontrolę, rozważ ustawienie flex-shrink oraz flex-basis indywidualnie dla każdego elementu. Czasem lepszym rozwiązaniem niż sztywne dwa do jednego jest użycie proporcji opartych na procentach, ale wtedy tracisz naturalną elastyczność. css-create.pl dwa i jeden sprawdzają się w prostych układach dwukolumnowych, gdzie jedna część ma być wyraźnie większa, ale obie mają się dopasowywać do dostępnej przestrzeni. Unikaj przypisywania zbyt wielu elementom różnych współczynników, bo układ staje się trudny w utrzymaniu. Zamiast tego stosuj jednolity system i dokumentuj przyjęte proporcje, aby przy kolejnych zmianach nie wprowadzać przypadkowych modyfikacji. Dzięki temu Twój layout pozostanie przewidywalny i odporny na rozdzielczości ekranu.