Stephanie Rewis' presentation to the Web Directions Code conference in Sydney & Melbourne July/Aug 2016

1. A Pragmatic Look at Flexbox
Flexing your layout muscles

2. Stephanie Rewis
Lead Developer, Design Systems
@stefsull

3. The problem with layout

4. position: absolute;

5. float: left;
float: right;
clearfix

6. display: inline-block;

7. display: table;

8. display: flex;

9. Can you use flexbox?

10. caniuse.com

11. Windows for Business

12. Fallbacks work nicely
Almost complete guide to flexbox without flexbox
Polyfill for IE 8 & 9
Modernizr

13. Flexbox Containers
display
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

14. Container properties — start & end
Flex container
Flex item Flex item
flex-direction: row;
Main axis
Cross axis
Main axis start Main axis end
Cross axis start
Cross axis end

15. Flex container
Flex item
Flex item
Cross axis
Main axis
Cross axis start Cross axis end
Main axis start
Main axis end
flex-direction: column;

16. Flexbox Items
flex-grow
flex-shrink
flex-basis
flex
order
align-self

17. What Can We Do
with Flexbox?

18. Inline-flex

19. Code for inline-flex
.flex-container {
display: inline-flex;
}

20. Equal height boxes

21. Equal height boxes
.container {
display: flex; // row is the default
}

22. Equal height boxes
.container {
display: flex;
}
.item {
flex: 0 1 32%;
}

23. Equal height boxes
.container {
display: flex;
justify-content: space-around;
}
.item {
flex: 0 1 32%;
}

24. Align to the bottom

25. Align to the Bottom
.chart {
display: flex;
align-items: flex-end;
justify-content: space-around;
}

26. Flex item alignment

27. Flex item alignment
.container {
display: flex;
align-items: flex-start; //no more stretching to fill the space
}

28. Flex item alignment
.container {
display: flex;
align-items: flex-start; //no more stretching to fill the space
}
.slds-align-middle {
align-self: center; // This overrides the align-items property
}

29. Flex item alignment
.container {
display: flex;
align-items: flex-start; //no more stretching to fill the space
}
.slds-align-middle {
align-self: center; // This overrides the align-items property
}

30. Absolute centering

31. Absolute centering
.container {
display: flex;
align-items: center; // aligns vertically
justify-content: center; // aligns horizontally
}

33. Media object

34. Media object
.media {
display: flex;
align-items: flex-start; // start at the top instead of stretch
}
.media__figure {
flex-shrink: 0; // maintains the integrity of the attached media
}
.media__body {
flex: 1; // takes up the remaining space
min-width: 0; // Allows truncation inside flexbox due to changes in
flex basis
}

35. Media object
.media {
display: flex;
align-items: flex-start; // start at the top instead of stretch
}
.media__figure {
flex-shrink: 0; // maintains the integrity of the attached media
}
.media__body {
flex: 1; // takes up the remaining space
min-width: 0; // Allows truncation inside flexbox due to changes in
flex basis
}

36. Media object
.media--center {
align-items: center;
}

37. Media object
.media__figure--reverse {
margin-right: 0; // remove the right margin
margin-left: .5rem; //set the left margin to desired value
}

38. Media object
.media__figure--reverse {
margin-right: 0; // remove the right margin
margin-left: .5rem; //set the left margin to desired value
}

39. Horizontal Lists

40. Horizontal lists
.list--horizontal {
display: flex;
justify-content: space-between;
}
.list__item {
display: flex;
align-items: center;
justify-content: center;
}

41. Horizontal lists
.list--horizontal {
display: flex;
}
.list__item {
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
}

42. Auto Margins

43. Auto margins
.col--bump-right {
margin-right: auto;
}
.col--bump-left {
margin-left: auto;
}

44. Auto margin - vertical
.container {
display: flex;
flex-direction: column; // stack the flex-items up
align-items: center; // align to center on column’s main axis
}
.col--bump-top { // bump classes come from our grid system
margin-top: auto;
}

45. Auto margin - vertical
.container {
display: flex;
flex-direction: column; // stack the flex-items up
align-items: center; // align to center on column’s main axis
}
.col--bump-top { // bump classes come from our grid system
margin-top: auto;
}

46. Back to absolute centering

47. Absolute centering
.absolute-center {
display: flex;
//justify-content: center;
//align-items: center;
}
.content {
margin: auto;
}

48. Grids

49. Grid base

50. Grid base
.grid {
display: flex;
}
.col {
flex: 1 1 auto;
}

51. Grid utilities

52. Flex-direction
.slds-grid--reverse {
flex-direction: row-reverse; // reverse the row
}
.slds-grid--vertical {
flex-direction: column; // create a column
}
.slds-grid--vertical-reverse {
flex-direction: column-reverse; // reverse the column
}

53. Flex-wrap
.slds-wrap { // This is placed on the .grid container
flex-wrap: wrap;
align-items: flex-start
}

54. Flex-wrap with flex-basis
.slds-col {
flex-basis: 10rem;
}

55. Horizontal alignment
.slds-grid—align-center {
justify-content: center;
}
.slds-grid—align-space {
justify-content: space-around;
}
.slds-grid—align-spread {
justify-content: space-between;
}
.slds-grid—align-end {
justify-content: flex-end;
}

56. Vertical alignment
.slds-grid—vertical-align-center {
align-items: center;
align-content: center;
}
.slds-grid--vertical-align-end {
align-items: flex-end;
align-content: flex-end
}

57. Vertical alignment
.slds-grid—vertical-align-center {
align-items: center;
align-content: center;
}
.slds-grid--vertical-align-end {
align-items: flex-end;
align-content: flex-end
}

58. Support for — 2,3,4,5,6,8
and 12 Column Units

59. .slds-size--x-of-y

60. Responsive sizing

61. Responsive sizing
<div class="slds-size--1-of-1 slds-small-size--1-of-2
slds-medium-size—1-of-4">
~content~
</div>

62. Responsive sizing

63. Responsive sizing

64. Responsive sizing
Codepen Example

65. Resources
A Complete Guide to Flexbox - CSS Tricks
Known Bugs and Workarounds for Flexbox — Phil Walton
Flexbox froggy game
Anything by Zoe Gillenwater if you need to do progressive enhancement
Flexbox tester - Understand how to calculate the width of flex items
Almost complete guide to flexbox (without flexbox)
Visual Flexbox builder for Webflow
Flexbox Spec from W3C
Salesforce Lightning Design System - Grids
Smashing Magazine- the flexbox reading list

66. thank y u
& Greg Rewis… ;)