Moderní rozložení 3

21. hodina WBA


Matěj Cajthaml — SSPŠ

©

Flexbox

  • dvě osy
  • justify-content
  • align-items
  • flex-direction
  • flex-wrap
  • gap / row-gap / column-gap

Dokončení flexboxu

Pořadí

Zarovnání na sekundární ose

Existuje zarovnání na hlavní ose pro určitý prvek?

Růst / roztažení

Prvek se bude moci roztahovat 3x více, než ostatní.

Zmenšení / stažení

flex-shrink

Jaká je základní hodnota flex-shrink a flex-grow?

Základní velikost

Určuje taktéž jakým směrem dle flex-direction.

Ikony

Ikony

  • nacházejí se skoro na každé stránce
  • sociální sítě
  • přehlednost, jednoduchost pro uživatele
  • designově zabírají méně místa a řeknou více

Pro WBA budeme používat ikony od služby Font Awesome

Ve verzi free máme k dispozici 1.600 ikon zdarma.

Ikony můžeme stáhnout a implementovat pomocí dokumentace. Pro účely prací budeme použivat CDN.

https://fontawesome.com

Obrázky pozadí

https://heropatterns.com

Barvy

https://flatuicolors.com

https://colorhunt.co

DevTools

DevTools

  • nástroje pro zlepšení vývoje webových stránek
  • všechny moderní prohlížeče
  • F12 / inspect element / CTRL + I

Děkuji za pozornost!

  • matej.cajthaml@ssps.cz
  • https://ssps.cajthaml.eu/