Tvorba klientských aplikací v JavaScriptu

Flexbox layout, Grid layout

• Webová interaktivní prezentace
• "?" zobrazí krátkou nápovědu
• Tisk jako obvykle
• Pro pokračování stiskněte mezerník

Obsah

1. Flexbox
2. Grid

Flexible boxes

• Flexible boxes - co to je?
• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
• https://css-tricks.com/snippets/css/a-guide-to-flexbox/
• zadani.html
• Úkol: Vytvořte responsivní layout, s hlavičkou a fixní patičkou a třemi sloupci, podobny jako je v reseni.html
• Hra na procvičení Flexboxu Flexbox Froggy

CSS Grid

1. Vytvořte stránku, která používá CSS Grid
   1. https://css-tricks.com/snippets/css/complete-guide-grid/
   2. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
2. Součástí stránky bude hlavička, menu, hlavní část, aside a patička
3. zadani-grid.html
4. Hra na procvičení Gridu Grid Garden

Řešení

• reseni.html
• cv7.css

---

• reseni-grid.html
• cv7-grid.css

Prostor pro otázky