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í 2

Navigace – pokračování

Co si vyzkoušíte

Naučíte hlavičku z předchozího cvičení chovat se v úzkém okně. Vycházíte z podoby, kterou jste právě dokončili.

Zadání

  1. Povolte hlavičce zalomení přes flex-wrap: wrap a přidejte gap, ať se zalomené řádky nedotýkají. Najděte si, že v gap mohou být 2 hodnoty.
  2. Zužte okno tak, aby se hlavička zalomila. Zkontrolujte, že mezera mezi řádky vypadá stejně dobře jako mezera mezi prvky.
  3. Nechte v úzkém okně menu roztáhnout přes celou šířku, aby na svém řádku stálo samo. Budete muset použít media query.
  4. Zkuste přes order posunout tlačítko před menu a zase zpátky. Projděte si stránku tabulátorem a všimněte si, v jakém pořadí po ní kurzor chodí.
  5. Vraťte order na výchozí hodnotu a do komentáře si napište, proč.

Bonus

  1. Přidejte hlavičce position: sticky a top: 0, ať zůstane při rolování nahoře.
  2. Zkuste totéž rozvržení postavit místo Flexboxu udělat pomocí gridu a rozhodněte, který ze zápisů byste v projektu nechali.