Zalamování položek

Naše karty jsou široké 12rem (podívejte se na pravidlo pro .karta), ale v úzkém náhledu se mačkají. Flex kontejner totiž drží všechny položky na jednom řádku, a když se nevejdou, zmenší je, klidně i pod jejich šířku (width). A když už se zmenšit nemohou (zhruba na šířku svého nejdelšího slova), přečnívají z kontejneru.

Většinou je lepší kartám šířku nechat a ty, které se nevejdou, přesunout na další řádek, stejně jako slova v odstavci. To určuje vlastnost flex-wrap (zalamování) flex kontejneru:

• nowrap: všechny položky zůstanou na jednom řádku. To je výchozí hodnota.
• wrap: položky, které se nevejdou, se přesunou na další řádek.

Mezera nastavená vlastností gap platí i mezi řádky. (Kdybyste někdy potřebovali jinou mezeru mezi řádky a jinou mezi položkami, použijte vlastnosti row-gap a column-gap.)

Kolik karet se vejde na jeden řádek, záleží na šířce náhledu. Pokud se ve vašem vejdou vedle sebe všechny čtyři, zužte okno prohlížeče a sledujte, jak se zalomí.