Flexbox all the things

Transcript

1. FLEXBOX ALL THE THINGS
2. Clearfix <div class="items"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="clearfix"></div> </div>
3. Clearfix v2 .clearfix:after { content: ""; display: table; clear: both; }
4. Q: Why did the web designer drown? A: She didn’t know if she should float:left or float:right.
5. display: flex;
6. W3C CSS Flexible Box Layout Module Level 1 3rd rev, September 2012
8. Gracefull degeration & Fallbacks → Polyfill with Flexie (Flexie, still old syntax) → New Polyfill in the works (Reflexie) → Fallback to float's
9. Let's get started
10. Concepts → Flex Containers → Flex Items
11. Flex Containers display: flex; display: inline-flex;
12. Flex Lines Items are positioned along a line inside a flex container
13. Container Properties
14. Flex Direction flex-direction: row;
15. Flex Direction flex-direction: row-reverse;
16. Flex Direction flex-direction: column;
17. Flex Wrap flex-wrap: nowrap; flex-wrap: wrap;
18. Justify content Align items in the main axis
19. Justify content justify-content: flex-start; justify-content: flex-end;
20. Justify content justify-content: center;
21. Justify content justify-content: space-between; justify-content: space-around;
22. Align items Aligning items in the cross axis
23. Align items align-items: stretch; align-items: center;
24. Align items align-items: flex-start; align-items: flex-end;
25. Align items align-items: baseline;
26. Align content Align lines within a flex container
27. Align content
28. Align content
29. Align content
30. Item Properties
31. Flex Grow
32. Flex Shrink
33. Align self
34. Flex shorthand flex: none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ];
35. Let's try it out!