css flexbox
Post on 14-Jan-2017
160 Views
Preview:
TRANSCRIPT
CSS flexbox
Václav Oppelt
▷ http://www.w3.org/TR/css-flexbox-1/
▷ CSS 2.1block layoutinline layouttable layoutpositioned layout
▷ CSS 3flex layout
CSS
Terminologie
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
Flexbox element - item
order: <number>;
flex-grow: <number>;
flex-basis: <length> / auto;
align-self: flex-start / flex-end / center
Podpora prohlížečů
IE 9 IE 10 IE 11 Edge
Firefox Chrome Safari Opera
iOS Android browser Chrome mobile Blackberry
▷ IE 9fallback
Odkazy k tématu
▷ http://www.w3.org/TR/css-flexbox-1/
▷ http://www.w3schools.com/cssref/css3_pr_flex.asp
▷ https://css-tricks.com/snippets/css/a-guide-to-flexbox/
▷ http://caniuse.com/#feat=flexbox
Díky za pozornost!Otázky?
Václav Oppeltvaclav.oppelt@keyup.eu
top related