CSS 3 přišlo s novým pracování s kontejnery obsahu. Novému pozicování se říká flexbox.Tento modul je speciálně určený pro rozvržení layoutu na webové stránce.

1. CSS flexbox
Václav Oppelt

2. ▷ http://www.w3.org/TR/css-flexbox-1/
▷ CSS 2.1
block layout
inline layout
table layout
positioned layout
▷ CSS 3
flex layout
CSS

3. Terminologie

4. Flexbox element - container
display: flex;
flex-direction: row / column / -reverse;
justify-content: flex-start / center / flex-end;
align-items: flex-start / stretch / center;
flex-wrap: nowrap / wrap / wrap-reverse

5. Flexbox element - item
order: <number>;
flex-grow: <number>;
flex-basis: <length> / auto;
align-self: flex-start / flex-end / center

6. Podpora prohlížečů
IE 9 IE 10 IE 11 Edge
Firefox Chrome Safari Opera
iOS Android browser Chrome mobile Blackberry
▷ IE 9
fallback

7. Odkazy k tématu
▷ http://www.w3.org/TR/css-flexbox-1/
▷ http://www.w3schools.com/cssref/css
3_pr_flex.asp
▷ https://css-tricks.com/snippets/css/a
-guide-to-flexbox/
▷ http://caniuse.com/#feat=flexbox

8. Díky za pozornost!
Otázky?
Václav Oppelt
vaclav.oppelt@keyup.eu