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

Navigace

Co si vyzkoušíte

Postavíte hlavičku webu z jedné řady prvků a rozdělíte v ní volné místo tak, aby logo zůstalo vlevo a tlačítko vpravo. Ve výchozím stavu máte v HTML hotovou hlavičku i s odkazy a v style.css jen barvy a písmo.

CodePen

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

Prvky hlavičky vypadají takhle:

html
<header class="header">
  <a class="logo" href="/">Studentský web</a>
  <nav class="menu">
    <a href="/clanky">Články</a>
    <a href="/projekty">Projekty</a>
    <a href="/kontakt">Kontakt</a>
  </nav>
  <button class="button">Přihlásit</button>
</header>

Zadání

  1. Přepněte .header na display: flex a svisle zarovnejte jeho obsah na střed.
  2. Dejte odkazy v .menu vedle sebe (tj. i z menu udělejte flexbox) a přidejte mezi ně mezeru přes gap.
  3. Odsuňte tlačítko k pravému okraji tak, že dovolíte .menu růst do volného místa.
  4. Vyzkoušejte si i druhou cestu: .menu vraťte zpátky a místo toho přidejte hlavičce justify-content: space-between. Porovnejte, co dělá každý z obou zápisů s mezerou mezi logem a odkazy.
  5. Nechte v hlavičce ten zápis, který vám přijde lepší, a napište si nad něj komentářem proč.
  6. Zužujte okno až do velikosti, kde už se prvky nevejdou vedle sebe a hlavička se rozbije.

Bonus

  1. Dejte odkazům v menu flex: 1, ať si rozdělí místo rovným dílem, a rozmyslete si, proč to u navigace většinou nechceme.
  2. Přidejte tlačítku flex: none a zjistěte, co se změní ve chvíli, kdy je v hlavičce málo místa.