Flexbox je první CSS standard pro tvorbu layoutů. Má vynikající podporu (v ČR 92-95%) a s pomocí rozumných fallbacků pro starší prohlížeče není důvod jej nepoužít hned.
V prezentaci se dozvíte:
1) Proč v CSS kromě Flexboxu v zásadě žádný layoutovací nástroj nemáme.
2) Základní příklady pro využití Flexboxu včetně ukázek kódu.
3) Jaká je podpora a jak se vypořádat se prohlížeči bez podpory.
Velký materiál o Flexboxu bude součástí ebooku, který si nyní můžete předobjednat za zvýhodněnou cenu: http://www.vzhurudolu.cz/ebook
3. 1. Layout v CSS
2. Flexbox v příkladech
3. Flexbox v prohlížečích
4. float: left;
display: inline-‐block;
position: absolute;
display: table;
display: flex;
hack
hack
hack
hack
layout
V CSS děláme layouty prostředky, které pro tvorbu layoutů nebyly vymyšleny.
Ne, že by nebyly užitečné, ale každý má svoje nevýhody.
5. 1. Layout v CSS
2. Flexbox v příkladech
3. Flexbox v prohlížečích
12. Kontejner flexboxu
Položka flexboxu Položka flexboxu
cdpn.io/e/raqXZX
Flexbox se skládá ze 2 typů elementů. Kontejner je to co má 'display: flex'.
Položka je vždy přímým následníkem. Položkou je i prázdný textový uzel.
14. roste? smršťuje se? výchozí velikost
flex: initial ✔ auto
flex: auto ✔ ✔ auto
flex: none auto
Položka se sama smršťuje pokud dostane méně místa, ale nepokouší se růst pokud okno
zvětšíme – 'flex: initial'. Plnou flexibilitu získáme pomocí 'flex: auto', žádnou s 'flex: none'.
16. px em zbytek
flex: none flex: auto
cdpn.io/e/jEJbmg
Kombinujeme různé jednotky a chceme, aby textový input zabral zbytek plochy. A nechceme
radiobutton a textový popisek zvětšovat či zmenšovat. S Flexboxem opět snadno.
19. Zarovávání je možné vertikálně i horizontálně. Pro všechny položky i jednotlivou položku
flexboxu. Všimněte si užitečného zarovnání 'baseline' – na účaří prvního řádku.
21. align-‐self: center
body { height: 100vh }
cdpn.io/e/zxydom
Z 'body' uděláme kontejner Flexboxu a roztáhneme jeho výšku na 100% výšky okna – pomocí
jednotky 'vh'. Pak už stačí jen položce Flexboxu pomocí 'align-self' přikázat, ať se centruje.
23. .item-‐C { order: 2 }
cdpn.io/e/JoqxJe
V kódu máme pořadí: A) C) B). Na malých displejích ale chceme vizuální pořadí změnit.
Změna vizuálního pořadí se hodí i třeba pro řazení od konce abecedy.
24. První desetinu
Flexboxu už umíme.
Ano, je to fakt mocný nástroj.
Pojďme si ale ještě odkázat na 3 z desítek
možných scénářů použití.
25. Inputy spojené s tlačítky
philipwalton.github.io/solved-‐by-‐flexbox/demos/input-‐add-‐ons/
26. Patička ke spodní hraně okna
philipwalton.github.io/solved-‐by-‐flexbox/demos/sticky-‐footer/