SlideShare une entreprise Scribd logo
1  sur  33
Télécharger pour lire hors ligne
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  
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.
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í  na  další  řádky  
    </label>
cdpn.io/e/raqXZX
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 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.
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á?
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'.
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 plochy. A nechceme
radiobutton a textový popisek zvětšovat či zmenšovat. S Flexboxem opět snadno.
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é 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…
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.
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ýš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.
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í změnit.
Změna vizuálního pořadí se hodí i třeba pro řazení od konce abecedy.
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í.
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-­‐flexbox;  
display:  flex;
github.com/postcss/autoprefixer
1) Definovaný fallback

display: block; display: flex;

2) Detekce vlastnosti

.no-flexbox { display: table; }

3) Nic
Co v prohlížečích bez podpory?
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.

Contenu connexe

Plus de Martin Michálek

SEO jako Brno - workshop k rychlosti webu
SEO jako Brno - workshop k rychlosti webuSEO jako Brno - workshop k rychlosti webu
SEO jako Brno - workshop k rychlosti webuMartin Michálek
 
Web rychlý jako blesk (s důrazem na AMP)
Web rychlý jako blesk (s důrazem na AMP)Web rychlý jako blesk (s důrazem na AMP)
Web rychlý jako blesk (s důrazem na AMP)Martin Michálek
 
CSS proměnné (Custom Properties)
CSS proměnné (Custom Properties)CSS proměnné (Custom Properties)
CSS proměnné (Custom Properties)Martin Michálek
 
AMP: Co řeší a co nového nabízí
AMP: Co řeší a co nového nabízíAMP: Co řeší a co nového nabízí
AMP: Co řeší a co nového nabízíMartin Michálek
 
Metriky rychlosti načítání
Metriky rychlosti načítáníMetriky rychlosti načítání
Metriky rychlosti načítáníMartin Michálek
 
WebExpo 2017 - Přístupnost v kódu: ukázky a návrhové vzory
WebExpo 2017 - Přístupnost v kódu: ukázky a návrhové vzoryWebExpo 2017 - Přístupnost v kódu: ukázky a návrhové vzory
WebExpo 2017 - Přístupnost v kódu: ukázky a návrhové vzoryMartin Michálek
 
Je CSS vážně tak podivné?
Je CSS vážně  tak podivné?Je CSS vážně  tak podivné?
Je CSS vážně tak podivné?Martin Michálek
 
WordPress šablony a rychlost načítání (WordCamp Praha 2017)
WordPress šablony a  rychlost načítání (WordCamp Praha 2017)WordPress šablony a  rychlost načítání (WordCamp Praha 2017)
WordPress šablony a rychlost načítání (WordCamp Praha 2017)Martin Michálek
 
Slasti a pasti prototypování v HTML
Slasti a pasti  prototypování v HTMLSlasti a pasti  prototypování v HTML
Slasti a pasti prototypování v HTMLMartin Michálek
 
10 praktických CSS3 a SVG řešení
10 praktických  CSS3 a SVG řešení10 praktických  CSS3 a SVG řešení
10 praktických CSS3 a SVG řešeníMartin Michálek
 
Debugování responzivních webů
Debugování responzivních webůDebugování responzivních webů
Debugování responzivních webůMartin Michálek
 
Vše co potřebuje markeťák vědět o rychlostní optimalizaci webů
Vše co potřebuje markeťák vědět o rychlostní optimalizaci webůVše co potřebuje markeťák vědět o rychlostní optimalizaci webů
Vše co potřebuje markeťák vědět o rychlostní optimalizaci webůMartin Michálek
 
Responzivní obrázky v praxi
Responzivní obrázky v praxiResponzivní obrázky v praxi
Responzivní obrázky v praxiMartin Michálek
 
Co by měl UXák vědět o responzivním webdesignu?
Co by měl UXák vědět o responzivním webdesignu?Co by měl UXák vědět o responzivním webdesignu?
Co by měl UXák vědět o responzivním webdesignu?Martin Michálek
 
Ach, ty mobilní prohlížeče
Ach, ty mobilní prohlížečeAch, ty mobilní prohlížeče
Ach, ty mobilní prohlížečeMartin Michálek
 
State of the art responzivních technikálií (Devel.cz)
State of the art responzivních technikálií (Devel.cz)State of the art responzivních technikálií (Devel.cz)
State of the art responzivních technikálií (Devel.cz)Martin Michálek
 

Plus de Martin Michálek (20)

SEO jako Brno - workshop k rychlosti webu
SEO jako Brno - workshop k rychlosti webuSEO jako Brno - workshop k rychlosti webu
SEO jako Brno - workshop k rychlosti webu
 
Web rychlý jako blesk (s důrazem na AMP)
Web rychlý jako blesk (s důrazem na AMP)Web rychlý jako blesk (s důrazem na AMP)
Web rychlý jako blesk (s důrazem na AMP)
 
CSS proměnné (Custom Properties)
CSS proměnné (Custom Properties)CSS proměnné (Custom Properties)
CSS proměnné (Custom Properties)
 
Devel.cz: Bootstrap 4
Devel.cz: Bootstrap 4Devel.cz: Bootstrap 4
Devel.cz: Bootstrap 4
 
AMP: Co řeší a co nového nabízí
AMP: Co řeší a co nového nabízíAMP: Co řeší a co nového nabízí
AMP: Co řeší a co nového nabízí
 
Metriky rychlosti načítání
Metriky rychlosti načítáníMetriky rychlosti načítání
Metriky rychlosti načítání
 
WebExpo 2017 - Přístupnost v kódu: ukázky a návrhové vzory
WebExpo 2017 - Přístupnost v kódu: ukázky a návrhové vzoryWebExpo 2017 - Přístupnost v kódu: ukázky a návrhové vzory
WebExpo 2017 - Přístupnost v kódu: ukázky a návrhové vzory
 
Je CSS vážně tak podivné?
Je CSS vážně  tak podivné?Je CSS vážně  tak podivné?
Je CSS vážně tak podivné?
 
WordPress šablony a rychlost načítání (WordCamp Praha 2017)
WordPress šablony a  rychlost načítání (WordCamp Praha 2017)WordPress šablony a  rychlost načítání (WordCamp Praha 2017)
WordPress šablony a rychlost načítání (WordCamp Praha 2017)
 
Slasti a pasti prototypování v HTML
Slasti a pasti  prototypování v HTMLSlasti a pasti  prototypování v HTML
Slasti a pasti prototypování v HTML
 
10 praktických CSS3 a SVG řešení
10 praktických  CSS3 a SVG řešení10 praktických  CSS3 a SVG řešení
10 praktických CSS3 a SVG řešení
 
Debugování responzivních webů
Debugování responzivních webůDebugování responzivních webů
Debugování responzivních webů
 
Mobile First v praxi
Mobile First v praxiMobile First v praxi
Mobile First v praxi
 
Vše co potřebuje markeťák vědět o rychlostní optimalizaci webů
Vše co potřebuje markeťák vědět o rychlostní optimalizaci webůVše co potřebuje markeťák vědět o rychlostní optimalizaci webů
Vše co potřebuje markeťák vědět o rychlostní optimalizaci webů
 
Responzivní obrázky v praxi
Responzivní obrázky v praxiResponzivní obrázky v praxi
Responzivní obrázky v praxi
 
Co by měl UXák vědět o responzivním webdesignu?
Co by měl UXák vědět o responzivním webdesignu?Co by měl UXák vědět o responzivním webdesignu?
Co by měl UXák vědět o responzivním webdesignu?
 
Ach, ty mobilní prohlížeče
Ach, ty mobilní prohlížečeAch, ty mobilní prohlížeče
Ach, ty mobilní prohlížeče
 
Proč LESS?
Proč LESS?Proč LESS?
Proč LESS?
 
CSS preprocesory
CSS preprocesoryCSS preprocesory
CSS preprocesory
 
State of the art responzivních technikálií (Devel.cz)
State of the art responzivních technikálií (Devel.cz)State of the art responzivních technikálií (Devel.cz)
State of the art responzivních technikálií (Devel.cz)
 

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