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

AUTOPREFIXER

https://github.com/philipwalton/flexbugs60

FLEXBUGS

https://github.com/philipwalton/flexbugs61

FLEXBOXFROGGY

http://flexboxfroggy.com62

CHRIS SAUVE@_lemonmade

63

SHOPIFYshopify.com/careers

64

THANKS EVERYONE!

65