Learn more about the CSS Flexible Layout module and how you can incorporate it into your WordPress themes.

1. FLEXING YOUR
WORDPRESS THEMES

2. Web Developer @
Endo Creative
Developing in WordPress since
2014
Twitter: @tim_blodgett

3. WEB LAYOUT HISTORY

4. No Layout

5. No Layout

6. Table Layout

7. Table Layout

8. Float-Based Layout

9. Flexible Layout

10. Grid Layout

11. WHY NOW?

12. WHY NOW?

13. FLEXBOX COMPONENTS

14. Flex Container

15. Flex Items

16. <div class=“flex-container”>
<div class=“flex-item”>lorem</div>
<div class=“flex-item”>ipsum</div>
<div class=“flex-item”>foobar</div>
</div>

18. FLEX CONTAINER
PROPERTIES

19. flex-direction
row
row-reverse
column
column-reverse

20. flex-wrap
nowrap
wrap
wrap-reverse

21. flex-flow
flex-direction
flex-wrap
flex-flow: row-reverse wrap;

22. justify-content
flex-start
flex-end
center
space-between
space-around

24. align-items
flex-start
flex-end
center
stretch
baseline

26. align-content
flex-start
flex-end
center
space-between
space-around
stretch

29. FLEX ITEM
PROPERTIES

30. flex
flex-grow
flex-shrink
flex-basis
flex: 0 1 auto;

31. flex-grow
a number that dictates what amount of
the available space inside the
container the item should take up
(negative numbers are invalid)

32. flex-shrink
a number that defines the ability for a
flex item to shrink if necessary
(negative numbers are invalid)

33. flex-basis
a size value that defines the default
size of an element before the
remaining space is distributed

34. order
a number that dictates the order in
which the flex item is displayed (works
similar to z-index)

36. align-self
flex-start
flex-end
center
stretch
baseline

37. PERFECTLY CENTERED
CONTENT

38. <p class=“flex-trick”>Center Me</p>
.flex-trick {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 20em;
}

40. SET FOOTER TO
BOTTOM OF PAGE

42. <div class=“site”>
<header class=“site-header”>...</header>
<div class=“site-content”>...</div>
<footer class=“site-footer”>...</footer>
</div>

43. html, body {
height: 100%
}
.site {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.site-footer {
margin-top: auto;
}

45. CSS Flexible Box Layout Module Level 1
https://www.w3.org/TR/css-flexbox-1/
A Complete Guide to Flexbox
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Flexbugs
https://github.com/philipwalton/flexbugs
Flexbox Froggy – A game for learning CSS flexbox
http://flexboxfroggy.com/

46. THANK YOU!!
Twitter: @tim_blodgett

47. QUESTIONS?