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

52.
So what do we do now?

53.
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

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>
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”) );

55.
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

56.
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