lekce04

Lekce 4: Úvod do flexboxu

Cíl

Úcastnice:

• ovládají základy flexbox layoutu
• vědí co je to flexbox kontejner a jeho položky
• umějí měnit pořadí prvků

Osnova

1. Stáhnout podklady pro lekci http://bit.ly/webaz-lekce4
2. Otevřít vedle flexbox-cheatsheet.pdf
3. Zmínit databázi https://caniuse.com
4. Flexbox kontejner display: flex | inline-flex
5. Flexbox položky
   • flex-grow: 0 | <number> - možnost zvětšování, podíly
   • flex-shrink: 1 | <number> - možnost zmenšování, podíly
   • flex-basis: auto | 0 | <width> - výchozí rozměr položky
   • order: <number> - pořadí položky
   • flex: <flex-grow> <flex-shrink> <flex-basis> - shorthand
   • margin - dopočítávání odsazení z volného místa
6. coding... Flexbox01 - položku 02 roztáhnout, hrát si s pozicemi
7. Zalamování položek na hlavní ose
   • flex-wrap: nowrap | wrap | wrap-reverse
   • coding... Flexbox04 - zalomení
8. Zarovnání položek na hlavní ose
   • justify-content: flex-start | flex-end | center | space-between | space-around

Domácí úkol

Boty - https://github.com/tvorimweb-2019-praha-podzim/projekt02-profil