lekce05

Lekce 5: Flexbox prakticky

Cíl

Úcastnice:

• zopakují nabité znalosti flexboxu z předchozí lekce
• vědí co je a znají rozdíl mezi hlavní a příčná osou
• vyzkouší další praktické ukázky
• zvládají flexbox natolik, že zvládnou samostatně úkol

Osnova

1. Stáhnout podklady pro lekci http://bit.ly/webaz-lekce5
2. Otevřít vedle flexbox-cheatsheet.pdf
3. Opakování flexbox vlastností
   • display: flex | inline-flex
   • flex: <flex-grow> <flex-shrink> <flex-basis>
   • flex-direction: row | row-reverse | column | column-reverse
   • flex-wrap: nowrap | wrap | wrap-reverse
   • justify-content: flex-start | flex-end | center | space-between | space-around
4. Zarovnání položek na příčné ose
   • align-items: stretch | flex-start | flex-end | center | baseline
5. coding... Flexbox02 - tří sloupcový layout + hlavička + patička
6. Směr vyskládání položek
   • flex-direction: row | row-reverse ( column | column-reverse)
   • coding... Flexbox03 - změna směru na column
   • coding... Flexbox04 - zalomení
7. ~ přestávka
8. align-self: auto | flex-start | flex-end | center | baseline | stretch
9. Samostatně 05-hlavicka
10. BONUS: FLEXBOX FROGGY jako opakování znalostí, lístečky
11. Zadat domácí úkol na FB

Domácí úkol

Projekt Super Appka