CSS Flexbox

  • View
    110

  • Download
    2

Embed Size (px)

DESCRIPTION

 

Transcript

  • 1. Getting to Know Flexbox By Elad Shechter facebook.com/groups/css.masters.israel/ coderwall.com/elad2412 wmp.co.il

2. ? Flexbox 3. * Flexbox display, -display . : ....block,inline,inline-block * layouts 4. ,flexbox ? - http://codepen.io/elad2412/pen/Hvmbq http://codepen.io/elad2412/pen/IExeA http://codepen.io/elad2412/pen/zJIwo 5. ... - from: http://www.environmentsforhumans.com/2013/css-summit/presentations/Williamson-CSSsummit2013-Flexbox.pdf 6. flexbox

! 7. flexbox- container- 8. container flex display:flex .flex-container { width:1000px; margin:0 auto; /*display flex definition*/ display:-webkit-flex; display:-ms-flexbox; display:flex; } .box{ border-radius: 3px; border: 4px solid #999; background: #E6E3D4; font-size:20px; font-weight:bold; padding:10px 0; }display:flex ? http://codepen.io/elad2412/pen/hqHCDdisplay:flex 9. display:flex container 10. flexbox 11. flex-direction.flex-container { -webkit-flex-direction:row; /* row/column/column-reverse/row-reverse */ -ms-flex-direction:row; flex-direction: row;} rowLive Example: http://codepen.io/elad2412/pen/sIuEbcolumn 12. ( ) flex-direction: row-reverse/column-reverse.flex-container { flex-direction: row-reverse;} rowrow-reversecolumncolumn-reverse 13. flex-wrap -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; /* nowrap / wrap / wrap-reverse*/Row wrapnowrapColumn wrapnowrapLive Example: http://codepen.io/elad2412/pen/IwDry 14. ( ) flex-wrap:wrap-reverse flex-wrap: wrap-reverse;Row wrapwrap-reverseColumn wrapwrap-reverseLive Example: http://codepen.io/elad2412/pen/aliKr 15. flex-direction & flex-wrap flex-flow.flex-container { flex-direction: row; flex-wrap: wrap;}=/*; /* flex-flow: row wrap; 16. flex * , ,container flex . ,layouts .- columnrow 17. justify-content -webkit-justify-content: flex-start; -ms-flex-pack: start; /*start/end/center/distribute/justify */ http://realworldvalidator.com/css/module/Microsoft/-ms-flex-packjustify-content: flex-start; /*flex-start/flex-end/center/space-around/space-between */ flex-flow: row wrap; flex-startflex-endcenterspace-aroundspace-betweencenterspace-aroundspace-between(flex:1 for the items)flex-flow: column wrap; flex-startflex-endhttp://codepen.io/elad2412/pen/duFvn(flex:1 for the items) 18. align-items -webkit-align-items:center; -ms-flex-align:center; /*start/end/center/baseline/stretch*/ http://realworldvalidator.com/css/module/Microsoft/-ms-flex-alignalign-items:center; /*flex-start/flex-end/center/baseline/stretch*/ flex-flow: row wrap; flex-startflex-endcenterbaselinecenterbaselinestretchflex-flow: column wrap; flex-startflex-endhttp://codepen.io/elad2412/pen/jthvystretch 19. .... 20. align-contentalign-items .align-content-webkit-align-content:flex-start; -ms-flex-line-pack:start; http://realworldvalidator.com/css/module/Microsoft/-ms-flex-line-pack align-content:flex-start; /* flex-start | flex-end | center | space-between | space-around | stretch */ flex-flow: row wrap; flex-startflex-endcenterspace-betweenspace-aroundstretchspace-betweenspace-aroundstretchflex-flow: column wrap; flex-startflex-endcenterhttp://codepen.io/elad2412/pen/ADeuG 21. ,flexbox * - container . * - container ,flexbox - container , container .flexbox * ) ( - .flex-direction: row/column * -.flex-wrap flex-wrap: wrap/nowrap )(order * / " flex-wrap: wrap-reverse * " flex-direction: row-reverse/column-reverse )(alignment * : - justify-content: flex-end - align-items:center * - align-content . - align-items .align-content 22. ,flexbox )( ) align-items:stretch ( * . * . :* - container - flexbox . . * flexbox . - container flexbox . 23. flexbox items- 24. flexflex:; Initial value the concatenation of the initial values of its longhand properties: flex-grow: 0 flex-shrink : 1 flex-basis : auto (behave like 0 , when you declare flex-grow, flex-basis initial to 0) 25. )flex( flex-grow * flex-grow . 0 container row{.box ;1:-webkit-flex ;1:-ms-flex /* */;1:flex } ;1:flex:1; = flex-growcolumn Live Example http://codepen.io/elad2412/pen/cfagr 26. layout -flex 27. layout .flex-container{ width: 600px; display: flex; } .flex1, .flex3{ flex:1; } .flex2{ flex:4; } 28. ? margin padding .flex-container{ width: 600px; display: flex; } .box{ padding: 20px; } .flex1, .flex3{ flex:1; } .flex2{ flex:4; }!content padding (20*2)*3=120px content 600-120=480px total unit row = 6 (1 + 4 + 1) 1 unit 480/6 = 80 flex:1 = 1*80 + 40(padding) = 120 flex:4 = 4*80 + 40(padding) = 360http://codepen.io/elad2412/pen/FnkvJ 29. flex-basis-webkit-flex-basis: 50%; -ms-flex-basis: 50%; flex-basis: 50%; http://codepen.io/elad2412/pen/uGzDdflex-basis flex grow * flex:1 400px; 30. flex-basis:auto; 31. flex-shrink * . . container 1: ,flex . - container , -.nowrap flex-wrap: nowrap ,flex-shrink 1. . . , 0, . 0:flex-shrink 0:flex-shrink 32. align-self .flex-3{ -webkit-align-self:flex-start; -ms-flex-item-align:start; align-self:flex-start; }http://codepen.io/elad2412/pen/JBphc 33. )(* 34. order * 0. * , 0. * . * ,flex-direction: row-reverse/column-reverse , . .;1-:-webkit-order ;1-:-ms-flex-order ;1-:order {3.flex ;1-:order ;border-color:red }http://codepen.io/elad2412/pen/kDuao 35. flexbox flex-grow * " . 1:flex-grow * - content .margins/borders/paddings * , .layouts flex basis * flex-basis: 200px * - flex-basis:auto flex-grow . flex-shrink * 0 1. 0:flex-shrink : * - align-self * - order 36. flex layout flex-grow:1 & flex basis CSS .flex-container{ display:flex; flex-flow: row wrap;} .box{ flex:1; } /*all box*/ .flex1{ flex-basis: 100%;} .flex3{ flex-basis: 60%;} .flex2,.flex4{ flex-basis: 20%;} .flex9{ flex-basis: 100%;}http://codepen.io/elad2412/pen/tfqBuHTML 37. - flexwrap ) ,(nowrap ) ( . - flex-flow flex-direction ,flex-wrap ) ( . flex-direction. - justify-content ,flexbox .space-between - align-items ,flexbox .baseline - order . , ) (, 0, . 0 1, 0 1-. 38. , flexbox prefix less . https://github.com/ProLoser/Flexbox.less/blob/master/flexbox.less 39. * margin collapse * ,min-width & min-height ,auto . - 40. flexbox /http://css-tricks.com/using-flexbox /http://coding.smashingmagazine.com/2013/05/22/centering-elements-with-flexboxw3c - flexbox /http://www.w3.org/TR/css3-flexboxFirefox https://developer.mozilla.org/en-US/docs/Web/CSS/align-itemsMicrosoft IE10 http://realworldvalidator.com/css/module/Microsoft/-ms-flex-alignCan I Use http://caniuse.com/flexboxA Complete Guide to Flexbox /http://css-tricks.com/snippets/css/a-guide-to-flexbox 41. By Elad Shechter Our CSS Facebook Group:facebook.com/groups/css.masters.israel/ My Articles:coderwall.com/elad2412 wmp.co.ilPresentation Link http://goo.gl/GpaAsg