Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Flexbox,
konečně pořádný
layout v CSS!
Martin Michálek
@machal
Předobjednávka:
vzhurudolu.cz/ebook
1. Layout v CSS
2. Flexbox v příkladech
3. Flexbox v prohlížečích
float:  left;  
display:  inline-­‐block;  
position:  absolute;  
display:  table;  
display:  flex;
hack  
hack  
hack  ...
1. Layout v CSS
2. Flexbox v příkladech
3. Flexbox v prohlížečích
Příklad #1
Základy pružnosti
cdpn.io/e/raqXZX
   <label>  
        <input  type="radio">  
        Popisek  
    </label>
cdpn.io/e/raqXZX
   <label>  
        <input  type="radio">  
        Popisek  s  hrozně  dlouhým  názvem,    
        který  se  zalomí  n...
cdpn.io/e/raqXZX
Zobrazování v prohlížeči
chce trochu poladit, že?
cdpn.io/e/raqXZX
Představte si CSS kód, kterým dosáhnete
tohoto zobrazení.
label  {display:  flex}
cdpn.io/e/raqXZX
Řešení pomocí Flexboxu je jednoduché.
Vystačíte si s jedinou CSS deklarací.
Kontejner  flexboxu
Položka  flexboxu Položka  flexboxu
cdpn.io/e/raqXZX
Flexbox se skládá ze 2 typů elementů. Kontejner j...
display:  flex
(flex:  initial)
cdpn.io/e/raqXZX
(flex:  initial)
'flex: initial' jako výchozí stav položky nemusíme uvádět...
roste? smršťuje  se? výchozí  velikost
flex:  initial ✔ auto
flex:  auto ✔ ✔ auto
flex:  none auto
Položka se sama smršťuj...
Příklad #2
Kombinování
jednotek
cdpn.io/e/jEJbmg
px em zbytek
flex:  none flex:  auto
cdpn.io/e/jEJbmg
Kombinujeme různé jednotky a chceme, aby textový input zabral zbytek...
cdpn.io/e/jEJbmg
align-­‐items:  flex-­‐center
align-­‐items:  flex-­‐start
cdpn.io/e/jEJbmg
Bonus – na rozdíl od prvních dvou, které zarov...
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 z...
Příklad #3
Vertikální centrování
cdpn.io/e/zxydom
align-­‐self:  center
body  {  height:  100vh  }
cdpn.io/e/zxydom
Z 'body' uděláme kontejner Flexboxu a roztáhneme jeho vý...
Příklad #4
Změna pořadí
cdpn.io/e/JoqxJe
.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í ...
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ář...
Inputy spojené s tlačítky
philipwalton.github.io/solved-­‐by-­‐flexbox/demos/input-­‐add-­‐ons/
Patička ke spodní hraně okna
philipwalton.github.io/solved-­‐by-­‐flexbox/demos/sticky-­‐footer/
Svatý grál layoutu
cdpn.io/e/jswBn
1. Layout v CSS
2. Flexbox v příkladech
3. Flexbox v prohlížečích
Zdroj:  CanIUse.com
8%
10%
82%
Podporují
Podporují s prefixem
Nepodporují
Zdroj:  CanIUse.com  a  data  pro  cca  český  průměr
Starší syntaxe Flexboxu
display:  flex; display:  -­‐webkit-­‐box;  
display:  -­‐webkit-­‐flex;  
display:  -­‐ms-­‐flexb...
1) Definovaný fallback

display: block; display: flex;

2) Detekce vlastnosti

.no-flexbox { display: table; }

3) Nic
Co v p...
Děkuji!
@machal
vzhurudolu.cz
vzhurudolu.cz/ebook
Vzhůru do CSS3
Tutoriály a referenční příručky
pro 22 nových CSS vlastno...
Upcoming SlideShare
Loading in …5
×

Flexbox, konečně pořádný layout v CSS!

3,725 views

Published on

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

Published in: Design
  • Sex in your area is here: ❶❶❶ http://bit.ly/36cXjBY ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating for everyone is here: ❶❶❶ http://bit.ly/36cXjBY ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Flexbox, konečně pořádný layout v CSS!

  1. 1. Flexbox, konečně pořádný layout v CSS! Martin Michálek @machal
  2. 2. Předobjednávka: vzhurudolu.cz/ebook
  3. 3. 1. Layout v CSS 2. Flexbox v příkladech 3. Flexbox v prohlížečích
  4. 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. 5. 1. Layout v CSS 2. Flexbox v příkladech 3. Flexbox v prohlížečích
  6. 6. Příklad #1 Základy pružnosti cdpn.io/e/raqXZX
  7. 7.    <label>          <input  type="radio">          Popisek      </label> cdpn.io/e/raqXZX
  8. 8.    <label>          <input  type="radio">          Popisek  s  hrozně  dlouhým  názvem,            který  se  zalomí  na  další  řádky      </label> cdpn.io/e/raqXZX
  9. 9. cdpn.io/e/raqXZX Zobrazování v prohlížeči chce trochu poladit, že?
  10. 10. cdpn.io/e/raqXZX Představte si CSS kód, kterým dosáhnete tohoto zobrazení.
  11. 11. label  {display:  flex} cdpn.io/e/raqXZX Řešení pomocí Flexboxu je jednoduché. Vystačíte si s jedinou CSS deklarací.
  12. 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.
  13. 13. display:  flex (flex:  initial) cdpn.io/e/raqXZX (flex:  initial) 'flex: initial' jako výchozí stav položky nemusíme uvádět. 
 Nastaví si to položka sama. Co to ale znamená?
  14. 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'.
  15. 15. Příklad #2 Kombinování jednotek cdpn.io/e/jEJbmg
  16. 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.
  17. 17. cdpn.io/e/jEJbmg
  18. 18. align-­‐items:  flex-­‐center align-­‐items:  flex-­‐start cdpn.io/e/jEJbmg Bonus – na rozdíl od prvních dvou, které zarovnáváme nahoru, chceme obsah posledního řádku zarovnávat vertikálně doprostřed. Ale těch možností zarovnání je daleko více…
  19. 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.
  20. 20. Příklad #3 Vertikální centrování cdpn.io/e/zxydom
  21. 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.
  22. 22. Příklad #4 Změna pořadí cdpn.io/e/JoqxJe
  23. 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. 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. 25. Inputy spojené s tlačítky philipwalton.github.io/solved-­‐by-­‐flexbox/demos/input-­‐add-­‐ons/
  26. 26. Patička ke spodní hraně okna philipwalton.github.io/solved-­‐by-­‐flexbox/demos/sticky-­‐footer/
  27. 27. Svatý grál layoutu cdpn.io/e/jswBn
  28. 28. 1. Layout v CSS 2. Flexbox v příkladech 3. Flexbox v prohlížečích
  29. 29. Zdroj:  CanIUse.com
  30. 30. 8% 10% 82% Podporují Podporují s prefixem Nepodporují Zdroj:  CanIUse.com  a  data  pro  cca  český  průměr
  31. 31. Starší syntaxe Flexboxu display:  flex; display:  -­‐webkit-­‐box;   display:  -­‐webkit-­‐flex;   display:  -­‐ms-­‐flexbox;   display:  flex; github.com/postcss/autoprefixer
  32. 32. 1) Definovaný fallback
 display: block; display: flex;
 2) Detekce vlastnosti
 .no-flexbox { display: table; }
 3) Nic Co v prohlížečích bez podpory?
  33. 33. Děkuji! @machal vzhurudolu.cz vzhurudolu.cz/ebook Vzhůru do CSS3 Tutoriály a referenční příručky pro 22 nových CSS vlastností včetně Flexboxu.

×