content-driven layouts with flexbox (chris sauve, cssday 2015)
Post on 14-Apr-2017
2.300 Views
Preview:
TRANSCRIPT
FLEXBOX1
CONTENT-DRIVEN LAYOUTS WITH
CHRIS SAUVE
2
LAYOUT STRATEGIES
3
ABSOLUTE POSITIONING
4
INLINE BLOCK
5
FLOATS
6
THINK DIFFERENT
7
CONTENT-OUT LAYOUT
8
BROWSER SUPPORT
9
YES YESYES10+ only-msinIE10
YESeveninMini!
10
YES YESYES10+ only-msinIE10
YESeveninMini!CAN I USE SAYS…
95.44%11
PARENT RULES
12
display:flex;//orinline-flex
flex-direction:row;//orcolumn
13
1 2 3
flex-direction:row;
14
1
2
3
flex-direction:column;
15
display:flex;//orinline-flex
flex-direction:row;//orcolumn
16
display:flex;//orinline-flex
flex-direction:row;//orcolumn
justify-content:center;
17
1 2 3
Main Axis
justify-content
18
1 2 3
justify-content:center;
19
1 2 3
justify-content:flex-start;
20
1 2 3
justify-content:flex-end;
21
1 2 3
justify-content:space-between;
22
1 2 3
justify-content:space-around;
23
display:flex;//orinline-flex
flex-direction:row;//orcolumn
justify-content:center;
24
display:flex;//orinline-flex
flex-direction:row;//orcolumn
justify-content:center;
align-items:stretch;
25
1 2 3
Cross Axis
align-items
26
1 2 3
align-items:stretch;//default
27
1 2 3
align-items:center;
28
1 2 3
align-items:flex-start;
29
1 2 3
align-items:flex-end;
30
display:flex;//orinline-flex
flex-direction:row;//orcolumn
align-items:stretch;
justify-content:center;
31
display:flex;//orinline-flex
flex-direction:row;//orcolumn
align-items:stretch;
justify-content:center;
flex-wrap:nowrap;
32
1 2 3
flex-wrap:nowrap;
33
1 2
3
flex-wrap:wrap;
34
CHILD RULES
35
flex-grow:0;
flex-shrink:0;
flex-basis:auto;
36
flex:<grow><shrink><basis>;
//or
flex-basis:<length>;
flex-basis:auto;
width:<length>;
37
//roughlyequivalentto:
1 2 3
100px
20px 20px 20px
38
1 2 3
100px
20px 20px 20px
40px of “growth” available39
1 2 3
flex-grow:0; flex-grow:0; flex-grow:0;
40
1 2 3
flex-grow:1;
13px of growthflex-grow:1;
13px of growthflex-grow:1;
13px of growth
41
1 2 3
flex-grow:1;
10px of growthflex-grow:2;
20px of growthflex-grow:1;
10px of growth
42
1 2 3
flex-grow:0;
0px of growthflex-grow:1;
20px of growthflex-grow:1;
20px of growth
43
1 2 3
40px
20px 20px 20px
44
1 2 3
40px
20px 20px 20px
20px of “shrink” available45
flex-shrink:0; flex-shrink:0; flex-shrink:0;
1 2 3
46
flex-shrink:0; flex-shrink:1; flex-shrink:1;
1
0px of shrink 10px of shrink 10px of shrink
47
NO SILVER BULLET
48
AWESOME EXAMPLES
49
PAGE LAYOUT
50
Play with the Codepencodepen.io/lemonmade/pen/RNEpJR?editors=110
GOAL
51
52
Header
ContentSidebar
Footer
GOAL
SMART POPOVERS
53
Play with the Codepencodepen.io/lemonmade/pen/XJobem?editors=110
54
55
WRAPPABLE LAYOUTS
Play with the Codepencodepen.io/lemonmade/pen/XXWZBr?editors=110
56
REFLOWING HEADER
57
Play with the Codepencodepen.io/lemonmade/pen/ZYgNmy?editors=110
58
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
CSS-TRICKS REFERENCE
59
THANKS EVERYONE!
65
top related