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 prefixemNepodporují

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ý fallbackdisplay: 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.