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.

Cvičení 1

Karta

Co si vyzkoušíte

Postavíte rozvržení karty produktu ve dvou podobách a přepnete mezi nimi jednou media query. Ve výchozím stavu máte v HTML tři karty s obrázkem, nadpisem, popisem a tlačítkem a v style.css hotové barvy a rámeček.

CodePen

Zadání máte připravené na CodePenu: Karta. Otevřete si ho a pracujte rovnou v něm.

Cílem jsou tyhle dvě podoby téže karty:

Vlevo karta v úzkém okně: obrázek nahoře, pod ním text a přes celou šířku tlačítko. Vpravo tatáž karta v širším okně otočená na řádek – obrázek vlevo, text a tlačítko vpravo.

Zadání

  1. Přepněte .card na Flexbox se směrem column a dejte jejím částem mezeru přes gap.
  2. Přilepte tlačítko ke spodní hraně karty tak, aby všechna tlačítka v řadě začínala ve stejné výšce i při různě dlouhém popisu.
  3. Přidejte media query, která od šířky 640px otočí kartu na řádek: obrázek vlevo, text a tlačítko vpravo.
  4. Dejte obrázku v širší podobě pevnou šířku (flex: none) a textové části flex: 1, ať zabere zbytek.
  5. Prodlužte v jedné kartě popis o tři řádky a zkontrolujte v obou šířkách, že se nic nerozsypalo.

Bonus

  1. Zkuste do popisu vložit hodně dlouhé slovo bez mezer a najděte šířku, ve které karta přeteče. Opravte to podle poznámky z výkladu.
  2. Zarovnejte v širší podobě tlačítko k pravému okraji karty jedinou vlastností na tlačítku samotném.