Flexbox Rocks - ConvergeSE 2016

Transcript

1. Jeremy Frank / April 2016 / ConvergeSE FLEXBOX ROCKS
2. History Basics & Terminology Examples Resources
3. LAYOUT HISTORY
5. ๏ block ๏ inline ๏ table ๏ positioned LAYOUT MODES IN CSS 2.1
6. ๏ Tables ๏ CSS Block Layout (with floats) LAYOUT HISTORY
7. float: left; width: 620px; float: right width: 331px; float
8. ๏ Tables ๏ CSS Block Layout (with floats) ๏ CSS Inline Layout (with display inline-block) LAYOUT HISTORY
10. font-size: 0 display: inline-block; display: inline-block; font-size: 16px;
11. ๏ Tables ๏ CSS Block Layout (with floats) ๏ CSS Inline Layout (with display inline-block) ๏ CSS Table Layout LAYOUT HISTORY
13. display: table-cell vertical-align: middle; text-align: center; display:
15. Now We Have Flexbox!
16. The Flexible Box Layout Module (e.g. Flexbox) aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic.
17. ๏ Alignment ๏ Justification ๏ Ordering ๏ Distribution of Available Space FLEXBOX HELPS WITH ๏ Equal Heights ๏ Sticky Footers ๏ Fluid Inputs with Prepended/ Appended Add-ons ๏ Grid Systems ๏ Vertical Centering EASY WITH FLEXBOX
18. Me What about page layout?
19. Atomic Design http://patternlab.io/
20. BASICS & TERMINOLOGY
21. Containers, Items & Axis
22. Flex Container Flex Item Flex Item Flex Item Main Axis Cross Axis Cross Start Cross End Main End Main Start Main Size Cross Size
23. ๏ flex-direction ๏ flex-wrap ๏ flex-flow ๏ justify-content ๏ align-items ๏ align-content FLEX CONTAINER PROPERTIES ๏ align-self ๏ order ๏ flex-grow ๏ flex-shrink ๏ flex-basis ๏ flex FLEX ITEM PROPERTIES
24. Flex Container Properties
25. flex-direction row B A C row-reverse B C A column A B C column-reverse C A B
26. flex-wrap nowrap wrap B A C D E B A C E D wrap-reverse E B A C D
27. justify-content flex-start flex-end center space-between space-around
28. align-items flex-start flex-end center stretch baseline A A A
29. align-content stretch space-between space-around
30. align-content. flex-start center flex-end
31. Flex Item Properties
32. align-self. flex-start flex-end align-items: center; align-items: center; center align-items: flex-start;
33. align-self. stretch baseline align-items: center; align-items: center; auto align-items: center;
34. order B A C E D F
35. order 0 0 0 0 0 1 B A C E D F
36. order B A C E D F 1 99 99 99 99 99 -1 0 0 0 0 0
37. order B A C E D F 1 2 3 99 99 99 -3 -2 -1 0 0 0
38. flex-basis 300px 300px 300px
39. flex-grow - - -
40. flex-grow - - 1
41. flex-grow 1 1 1
42. flex-grow 2 1 1
43. flex-shrink
44. EXAMPLES
45. Equal Heights
46. display: display: display: display: display:
47. Vertical Centering
48. display: align-items: center; flex-direction: row; display: align-items: center; justify-content: center;
49. display: flex-direction: column; justify-content
50. Reordering
51. A B C E D
52. A. order: 2; B. order: 1; C. order: 3; D. order: 4; E. order: 5;
53. order: 2; order: 1; order: 0;
54. A B C D
55. D. order: 2; A. order: 1; B. order: 3; C. order: 4;
56. Grid Systems
59. Sticky Footer
60. flex: 1
61. Layout Shifting
62. flex-direction: column flex-direction: row; height: 25%; width: 50%; height: calc(100%/3); width: calc(100%/3)
63. flex-direction: column flex-direction: row;
64. HOW TO GET STARTED
65. 21+ 11+ 6.1+ 28+
66. http://caniuse.com/#feat=flexbox
67. .box { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } Autoprefixer .box { display: flex; flex-direction: column; justify-content: center; align-items: center; }
68. Gulp Grunt Webpack
69. Codekit Prepros Hammer
70. http://tympanus.net/codrops/css_reference/flexbox/ http://css-tricks.com/snippets/css/a-guide-to-flexbox/
71. http://codepen.io/enxaneta/full/adLPwv/ http://flexboxin5.com/
72. https://github.com/philipwalton/flexbugs http://philipwalton.github.io/solved-by-flexbox/
73. http://davidwalsh.name/flexbox-dice
74. Thank You! http://www.flex-box-racing.com/gallery/bes-paul-richard-2014/ @jeremyfrank