Handling variable or unknown content in a layout can be tricky. Our current responsive layout techniques generally have unspoken assumptions that can easily be broken by changes in content, internationalization, and a collection of other unexpected adjustments to what needs to be laid out. This talk will discuss how we can use Flexbox-driven layouts to overcome these challenges - how we can learn to stop worrying about our traditional, top-down layout techniques and love the content-driven layouts that Flexbox affords. We'll go over the key parts of the Flexbox spec that let the container respond to the content, instead of the other way around, and how we can build amazingly responsive layouts without a single media query or fixed width.

1. FLEXBOX
1
CONTENT-DRIVEN
LAYOUTS WITH

2. CHRIS
SAUVE
2

3. LAYOUT
STRATEGIES
3

4. ABSOLUTE
POSITIONING
4

5. INLINE BLOCK
5

6. FLOATS
6

7. THINK
DIFFERENT
7

8. CONTENT-OUT
LAYOUT
8

9. BROWSER
SUPPORT
9

10. YES YESYES10+ only
-ms in IE10
YES
even in Mini!
10

11. YES YESYES10+ only
-ms in IE10
YES
even in Mini!
CAN I USE SAYS…
95.44%
11

12. PARENT
RULES
12

13. display: flex; // or inline-flex
flex-direction: row; // or column
13

14. 1 2 3
flex-direction: row;
14

15. 1
2
3
flex-direction: column;
15

16. display: flex; // or inline-flex
flex-direction: row; // or column
16

17. display: flex; // or inline-flex
flex-direction: row; // or column
justify-content: center;
17

18. 1 2 3
Main Axis
justify-content
18

19. 1 2 3
justify-content: center;
19

20. 1 2 3
justify-content: flex-start;
20

21. 1 2 3
justify-content: flex-end;
21

22. 1 2 3
justify-content: space-between;
22

23. 1 2 3
justify-content: space-around;
23

24. display: flex; // or inline-flex
flex-direction: row; // or column
justify-content: center;
24

25. display: flex; // or inline-flex
flex-direction: row; // or column
justify-content: center;
align-items: stretch;
25

26. 1 2 3
Cross Axis
align-items
26

27. 1 2 3
align-items: stretch; // default
27

28. 1 2 3
align-items: center;
28

29. 1 2 3
align-items: flex-start;
29

30. 1 2 3
align-items: flex-end;
30

31. display: flex; // or inline-flex
flex-direction: row; // or column
align-items: stretch;
justify-content: center;
31

32. display: flex; // or inline-flex
flex-direction: row; // or column
align-items: stretch;
justify-content: center;
flex-wrap: nowrap;
32

33. 1 2 3
flex-wrap: nowrap;
33

34. 1 2
3
flex-wrap: wrap;
34

35. CHILD
RULES
35

36. flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
36
flex: <grow> <shrink> <basis>;
// or

37. flex-basis: <length>;
flex-basis: auto;
width: <length>;
37
// roughly equivalent to:

38. 1 2 3
100px
20px 20px 20px
38

39. 1 2 3
100px
20px 20px 20px
40px of “growth” available
39

40. 1 2 3
flex-grow: 0; flex-grow: 0; flex-grow: 0;
40

41. 1 2 3
flex-grow: 1;
13px of growth
flex-grow: 1;
13px of growth
flex-grow: 1;
13px of growth
41

42. 1 2 3
flex-grow: 1;
10px of growth
flex-grow: 2;
20px of growth
flex-grow: 1;
10px of growth
42

43. 1 2 3
flex-grow: 0;
0px of growth
flex-grow: 1;
20px of growth
flex-grow: 1;
20px of growth
43

44. 1 2 3
40px
20px 20px 20px
44

45. 1 2 3
40px
20px 20px 20px
20px of “shrink” available
45

46. flex-shrink: 0; flex-shrink: 0; flex-shrink: 0;
1 2 3
46

47. flex-shrink: 0; flex-shrink: 1; flex-shrink: 1;
1
0px of shrink 10px of shrink 10px of shrink
47

48. NO SILVER
BULLET
48

49. AWESOME
EXAMPLES
49

50. PAGE
LAYOUT
50
Play with the Codepen
codepen.io/lemonmade/pen/RNEpJR?editors=110

51. GOAL
51

52. 52
Header
ContentSidebar
Footer
GOAL

53. SMART
POPOVERS
53
Play with the Codepen
codepen.io/lemonmade/pen/XJobem?editors=110

54. 54

55. 55
WRAPPABLE
LAYOUTS
Play with the Codepen
codepen.io/lemonmade/pen/XXWZBr?editors=110

56. 56

57. REFLOWING
HEADER
57
Play with the Codepen
codepen.io/lemonmade/pen/ZYgNmy?editors=110

58. 58

59. https://css-tricks.com/snippets/css/a-guide-to-flexbox/
CSS-TRICKS
REFERENCE
59

60. AUTOPREFIXER
https://github.com/philipwalton/flexbugs
60

61. FLEXBUGS
https://github.com/philipwalton/flexbugs
61

62. FLEXBOXFROGGY
http://flexboxfroggy.com
62

63. CHRIS
SAUVE
@_lemonmade
63

64. SHOPIFY
shopify.com/careers
64

65. THANKS
EVERYONE!
65