Flex-grow – to je jedna z hlavních vlastností CSS, která umožňuje určit, jaký podíl volitelného prostoru by měly mít flexibilní prvky v kontejneru.
Když je flex-grow nainstalován pro prvek, který je podřízen jiné položce se zapnutou vlastností display: flex, tento podřízený prvek bude zabírat veškerý dostupný volný prostor, pokud jej ostatní prvky zcela nenaplní.
Vlastnost flex-grow má číselnou hodnotu, která určuje proporce rozdělení volného prostoru mezi flexibilní prvky. Čím větší je hodnota flex-grow, tím více prostoru prvek zabere. Pokud mají všechny prvky stejnou hodnotu flex-grow, zaberou stejný podíl volného prostoru. Pokud je však jeden z prvků nastaven na hodnotu flex-grow větší než ostatní, bude zabírat větší podíl volného místa.
Účel vlastnosti CSS flex grow
Hodnota vlastnosti Flex grow udává proporcionální koeficient zvětšení velikosti prvku. Pokud má například jedna položka hodnotu flex grow 2 a druhá položka 1, pak se první položka zvětší o polovinu rychleji než druhá položka.
Bez použití vlastností flex grow budou mít všechny prvky stejnou velikost a nebudou měnit svou šířku nebo výšku, když se změní velikost nadřazeného kontejneru. Přidání vlastnosti Flex grow však umožňuje prvkům zabírat volný prostor a protahovat se, aby zaplnily veškeré dostupné místo v nadřazeném kontejneru.
Vlastnost flex grow je zvláště užitečná, když je nutné vytvořit adaptivní pracovní stůl. Pomáhá rozložit dostupný prostor mezi prvky a poskytuje flexibilnější a efektivnější uspořádání. Při změně velikosti obrazovky nebo zařízení budou položky s vyšší hodnotou flex grow dostávat více volného místa a škálovat se, aby se zachovaly proporce a zachovala čitelnost a dostupnost obsahu.
Vlastnost flex grow může mít hodnoty od 0 do kladného čísla. Hodnota 0 označuje, že prvek se nebude protahovat, a kladné číslo udává, kolikrát se prvek může zvětšit ve velikosti ve srovnání s jinými prvky.
| Hodnota | Popis |
|---|---|
| 0 | Prvek se neroztahuje |
| 1 | Prvek se protáhne podle jiných prvků |
| 2 | Prvek se natáhne dvakrát rychleji než prvky s hodnotou 1 |
| více 2 | Prvek se protáhne úměrně stanovené hodnotě |
Hodnota vlastnosti flex-grow
Vlastnost flex-grow určuje, jak jsou prvky uvnitř kontejneru rozloženy na šířku ve Flex kontejneru. Určuje, jak moc se prvek musí protáhnout, aby zaplnil veškerý dostupný prostor.
Hodnota vlastnosti flex-grow je kladné číslo, které udává, kolikrát se prvek musí protáhnout ve srovnání s jinými prvky. Výchozí hodnoty pro všechny položky jsou 0, což znamená, že položka se nebude natahovat a zabere pouze Místo potřebné pro obsah.
Pokud mají všechny prvky hodnotu flex-grow 1, budou rovnoměrně rozloženy na šířku kontejneru. Pokud má například jedna položka hodnotu flex-grow 2 a ostatní prvky 1, pak tento prvek zabere dvakrát více místa než ostatní prvky.
Vlastnost flex-grow bude mít účinek pouze tehdy, pokud je v nádobě volný prostor. Pokud není žádný volný prostor, prvky se neroztahují a vlastnost flex-grow bude ignorována.