Flexbox a CSS layout technique that make sense

Demos:
http://codepen.io/collection/nbGBxm/

Resources:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
http://flexbox.io/
http://flexboxfroggy.com/

Transcript

1. Flexbox a CSS layout technique that make sense ngParty Motaquillah Maddane @electrik_frog
2. I’m Motaki @electrik_frog electrik-frog.com
3. I’m Motaki Frontend Developer @
4. I’m Motaki Open source Projects
5. I’m Motaki Open source Projects
6. Why? General Concepts Deep dive into the properties
7. Why? General Concepts Deep dive into the properties
8. Why? General Concepts Deep dive into the properties
9. WHY?
10. CSS Problems* (a.k.a why you hate CSS) *
11. CSS hard!
12. Story Time
13. Me after that
14. I failed because building layouts is hard.
15. Some attempts to fix that
16. Tables
17. Float: not-right-at-all;
18. inline-block
19. If you know what I’m saying!
20. A lot of unresolved mysteries
21. Sticky footer
23. Equal height columns
26. Vertical centering
27. Insert Space/sticky footer joke we discovered water on mars
28. Me trying to center vertically
29. Flexbox
30. General Concepts* (aka theory time) *
31. Flex Container Will contain the Flex Items
32. Flex Item Building block of a Flex container
33. Main axis Defines the flow of the items on the container
34. Cross axis Defines the flow of the items on the container
35. Main axis Always keep this in mind Cross axis
36. Flex Properties* (a.k.a When things get interesting) *
37. Flex container
38. Display: Flex; Activates the magic Container
39. Flex-direction Defines the main/cross axis of the container Container
40. Flex-direction 1 2 3 Row Items flow from left to right *Default Container Main axis
41. Flex-direction 1 2 3 Row Items flow from left to right *Default Container Main axis Cross axis
42. Flex-direction Container 1 2 3 Column Items flow from top to bottom Main axis
43. Flex-direction Container 1 2 3 Column Items flow from top to bottom Main axis Cross axis
44. Flex-wrap Where the magic happens Container
45. Container Flex-wrap nowrap *Default Do nothing when there’s no enough space
46. Container Flex-wrap wrap push when there’s no extra space
47. Container Justify-content Controls the alignment of Flex Items on the main axis
48. *Default 1 2 3 Justify-content Container Flex-start Elements are positioned at the start Main axis
49. 1 2 3 Justify-content Container Flex-end Elements are positioned at the end Main axis
50. 1 2 3 Justify-content Container center Elements are centered Main axis
51. 1 2 3 Justify-content Container space-between Space is evenly distributed between the items Main axis
52. 1 2 3 Justify-content Container space-around Space is evenly distributed around and between the items Main axis
53. Container align-items Controls the alignment of Flex Items on the cross axis
54. align-items Container Flex-start Elements are positioned at the start Cross axis
55. 4 align-items Container Flex-end Elements are positioned at the end Cross axis
56. align-items Container center Elements are centered Cross axis
58. *Default stretch Elements are stretched align-items Container Cross axis
59. ITEM
60. order controls the order of flex items Item
61. Item order Item integer -1 1 2 the item with the lowest order will go first 1
62. Flex: ; Where the magic happens Item
63. Flex: <flex-grow> <flex-shrink> <flex-basis>; shorthand for 3 other properties Item
64. The base size of the flex item before space distribution Item flex-basis
65. Item flex-basis Item css length unit the base length of the flex item equals the specified length 270px 3em 30%
66. Item flex-basis Item auto the base length of the flex item equals its content content
67. Defines the ability of an item to grow when space is available Item flex-grow
68. Item flex-grow Item flex-grow: x; * Positive number * Defines the ability of an item to grow when space is available 100px 20px 20px 0 0 Free space
69. Item flex-grow Item flex-grow: x; * Positive number * Defines the ability of an item to grow when space is available 100px 20px Free space 1 20px 0
70. Item flex-grow Item flex-grow: x; * Positive number * Defines the ability of an item to grow when space is available 100px 20px 20px 0 1
71. Item flex-grow Item flex-grow: x; * Positive number * Defines the ability of an item to grow when space is available 100px 20px 20px 1 1
72. Item flex-grow Item flex-grow: x; * Positive number * Defines the ability of an item to grow when space is available 100px 20px 20px 1 1
73. Defines the ability of an item to shrink when there’s no available space Item flex-shrink
74. Item flex-grow Item * Positive number * 40px 40px flex-shrink: x; Defines the ability of an item to shrink when there’s no available space
75. Item flex-grow Item * Positive number * 60px 40px 40px flex-shrink: x; Defines the ability of an item to shrink when there’s no available space
76. Item flex-grow Item * Positive number * 60px 40px 40px flex-shrink: x; 0 0 Defines the ability of an item to shrink when there’s no available space
77. Item flex-grow Item * Positive number * 60px 40px 40px flex-shrink: x; 0 0 Defines the ability of an item to shrink when there’s no available space Needed space (20px)
78. Item flex-grow Item * Positive number * 60px 40px 40px flex-shrink: x; 1 0 Defines the ability of an item to shrink when there’s no available space Needed space (20px)
79. Item flex-grow Item * Positive number * 60px 20px 40px flex-shrink: x; 1 0 Defines the ability of an item to shrink when there’s no available space Needed space (20px)
80. Item flex-grow Item * Positive number * 60px 20px 40px flex-shrink: x; 1 1 Defines the ability of an item to shrink when there’s no available space Needed space (20px)
81. Item flex-grow Item * Positive number * 60px 30px 30px flex-shrink: x; 1 1 Defines the ability of an item to shrink when there’s no available space Needed space (20px)
82. You right now
83. Hope not!!
84. Show me code* (a.k.a examples time)
85. Browser Support
86. 95.31% * c a n i u s e . c o m /f l ex b ox *
87. 10+ only Oh yeah Come’on Of course Yes! Kinda saw this one coming!
88. Autoprefixer
89. REFERENCES
90. REFERENCES CSS Tricks Flexbox Guide Flexbox.io Flexboxfroggy.com
91. REFERENCES CSS Tricks Flexbox Guide Flexbox.io Flexboxfroggy.com
92. REFERENCES CSS Tricks Flexbox Guide Flexbox.io Flexboxfroggy.com
93. Closing Thoughts
94. ありがとう* I can’t read it too but it means THANK YOU *