Flexbox introduction

These are the slides used as support by @snapeuh in our last technical workshop at Reputation VIP.

Transcript

1. Flexbox by @snapeuh
2. What is Flexbox?
3. Originally implemented by Mozilla as XUL layout model by Tab Atkins Jr. in 2007.
4. My goal in doing Flexbox [...] was to replace all the crazy float/table/inline-block/etc hacks that I’d had to master as a webdev. All that crap was (a) stupid, (b) hard to remember, and (c) limited in a million annoying ways, so I wanted to make a few well-done layout modules that solved the same problems in simple, easy-to-use, and complete ways.
5. New Layout model.
6. First draft in 2009 (W3C) — Last Call Working Draft (W3C) in May 2015.
7. display: box; display: flexbox; display: flex;
8. Can I use Flexbox?
11. Flexbox Properties
12. .parent { ... } .child { ... }
13. Parent Flexbox Properties
14. .parent { display: flex; }
15. .parent { flex-direction: row; /* Other values */ flex-direction: row-reverse; flex-direction: column flex-direction: column-reverse; }
16. .parent { flex-wrap: nowrap; /* Other values */ flex-wrap: wrap; flex-wrap: wrap-reverse; }
17. .parent { flex-flow: <flex-direction> <flex-wrap>; }
18. .parent { justify-content: flex-start; /* Other values */ justify-content: flex-end; justify-content: center; justify-content: space-between; justify-content: space-around; }
19. .parent { align-items: stretch; /* Other values */ align-items: flex-start; align-items: flex-end; align-items: center; align-items: baseline; }
20. .parent { align-content: stretch; /* Other values */ align-content: flex-start; align-content: flex-end; align-content: center; align-content: space-between; align-content: space-around; }
21. Child Flexbox Properties
22. .child { order: <integer>; }
23. .child { flex-grow: <integer>; }
24. .child { flex-shrink: <integer>; }
25. .child { flex-basis: auto; /* Other values */ flex-basis: <px>; }
26. .child { flex: <flex-grow> <flex-shrink> <flex-basis>; }
27. .child { align-self: auto; /* Other values */ align-self: flex-start; align-self: flex-end; align-self: center; align-self: baseline; align-self: stretch; }
28. Flexbox Examples
29. Any questions? Thank you