Lekce 1.2

Flexbox a responzivní vzory

Jak si prvky dělí místo v řádku, kdy sáhnout po mřížce a jak psát velikosti tak, aby se stránka přizpůsobila sama.

Doporučené úlohy na doma

Obě úlohy stojí na dnešní látce a dají se dělat nezávisle na sobě.

Patička

Postavte patičku webu ze tří sloupců s odkazy a řádku s copyrightem. V širokém okně ať sloupce stojí vedle sebe, v úzkém pod sebou, a to bez jediné media query. Hotovo je ve chvíli, kdy se mezi šířkami nic neskáče a copyright zůstává vždycky dole.

Ceník

Vysázejte tři karty s tarify vedle sebe v jednom řádku tak, aby měly stejnou výšku, tlačítka lícovala u spodní hrany a prostřední karta byla pomocí poměru ve flex-grow dvakrát širší než krajní. Hotovo je ve chvíli, kdy se karty v užším okně zalomí pod sebe a nic se přitom nerozsype.