Finally a standard layout tool built for the internet.

1. Flexbox Layouts
A proper layout tool for the web… Finally!

2. HTML layouts before
display

3. HTML layouts before
display
block | inline | inline-block | table | inline-table

4. HTML layouts before
position

5. HTML layouts before
position
relative | absolute | fixed | static

6. HTML layouts before
float

7. HTML layouts before
float
left | right | none

8. HTML layouts before
float
left | right | none
clear

9. HTML layouts before
float
left | right | none
clear
left | right | both | none

10. HTML layouts with Flexbox

11. HTML layouts with Flexbox
flex container

12. HTML layouts with Flexbox
flex container
display: flex | inline-flex

13. HTML layouts with Flexbox
flex container
flex items

14. Flex Container
flex-direction
vertical horizontal

15. Flex Container
flex-wrap
wrap no-wrap

16. Flex Container
justify-content: flex-start

17. Flex Container
justify-content: flex-end

18. Flex Container
justify-content: center

19. Flex Container
justify-content: space-between

20. Flex Container
justify-content: space-around

21. Flex Container
align-items: flex-start

22. Flex Container
align-items: flex-end

23. Flex Container
align-items: center

24. Flex Container
align-items: stretch

25. Flex Container
align-items: baseline
hola hi hey howdy

26. Flex Container
align-content: flex-start

27. Flex Container
align-content: flex-end

28. Flex Container
align-content: center

29. Flex Container
align-content: stretch

30. Flex Container
align-content: space-between

31. Flex Container
align-content: space-around

32. Flex Items
order: 1

33. Flex Items
order: 2

34. Flex Items
order: 3

35. Flex Items
flex-grow: 1

36. Flex Items
flex-grow: 1

37. Flex Items
flex-grow: 1

38. Flex Items
flex-grow: 1

39. Flex Items
flex-grow: 2

40. Flex Items
flex-grow: 1

41. Flex Items
flex-shrink: 1

42. Flex Items
flex-shrink: 2

43. Flex Items
flex-shrink: 1

44. Flex Items
flex-basis: 20em

45. Flex Items
flex: 2 1 50em

46. Flex Items
flex: 2 1 50em
flex-grow

47. Flex Items
flex: 2 1 50em
flex-shrink

48. Flex Items
flex: 2 1 50em
flex-basis

49. Flex Items
align-self: flex-start
align-self: flex-end

50. Internet Explorer 9 and below…

51. Internet Explorer 9 and below…
Canada: 7.5%
rapidly shrinking

53. So what do we do now?

54. So what do we do now?
pureCSS grid module
uses inline-block for <= IE9
<div class="pure-g">
<div class="pure-u-1-3"><p>Thirds</p></div>
<div class="pure-u-1-3"><p>Thirds</p></div>
<div class="pure-u-1-3"><p>Thirds</p></div>
</div>
Works very well if
you know how many
columns

55. So what do we do now?
pureCSS grid module
uses inline-block for <= IE9
<div class="pure-g">
<div class="pure-u-1-3"><p>Thirds</p></div>
<div class="pure-u-1-3"><p>Thirds</p></div>
<div class="pure-u-1-3"><p>Thirds</p></div>
</div>
jQuery insertAfter()
re-order with javascript
<div class=“order-3”>
<div class=“order-1”>
<div class=“order-2”>
<div class=“order-3”>
$(window).resize(function() {
if ($(window).width() < 960) {
$(“.order-3”).insertAfter( $(“.order-2”) );

56. So what do we do now?
a {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex
}
a {
display: flex;
}
Autoprefixer post-processor

57. Holy Grail Layout
header, footer, three columns
• Has a fluid center with fixed-width sidebars
• Center column should appear first in the HTML
• Columns should be the same height
• Minimal markup
• The footer should "stick" to the bottom of the page when content is sparse
http://codepen.io/adamskye/pen/OPJKEP