Roztahování položek

Karty se teď hezky zalamují, ale na konci každého řádku zbývá vpravo volné místo. Lépe by vypadalo, kdyby karty vyplnily celý řádek.

Kolik volného místa položka dostane, určuje vlastnost flex-grow (růst). Tentokrát je to vlastnost flex položky, ne kontejneru. Její hodnotou je číslo:

• 0: položka neroste. To je výchozí hodnota.
• 1: položka roste a dostane podíl z volného místa. Když má na řádku flex-grow: 1 víc položek, rozdělí se o volné místo rovným dílem.
• Větší číslo znamená větší podíl: položka s flex-grow: 2 dostane dvakrát víc volného místa než položka s flex-grow: 1.

Všechny naše karty začínají na šířce 12rem, takže když každá karta na řádku dostane stejný díl volného místa, budou všechny stejně široké a vyplní celý řádek.

Často uvidíte zkrácený zápis flex: 1. Také nastaví flex-grow: 1, ale navíc dá položce počáteční velikost nula místo její šířky. Šířka se pak nepoužije a všechny položky s flex: 1 si rozdělí celý řádek rovným dílem. To se hodí například pro hlavní sloupec, který má vyplnit místo vedle bočního panelu s pevnou šířkou:

.bocni-panel {
	width: 15rem;
}

.hlavni-sloupec {
	flex: 1;
}

Naše karty ale svou šířku potřebují: podle ní prohlížeč pozná, kdy se karta na řádek už nevejde a musí se zalomit. Proto u nich použijeme flex-grow: 1.