flexbox 4 life (In.Tegra.Do)

Talk apresentada na Tegra em 04/09/2015

Transcript

1. flexbox4life INTEGRADO P O R F E L I P E B E R N A R D E S
2. grid layout
6. implementação
7. table grid
8. float grid
9. flexbox module a melhor forma de posicionar, alinhar e distribuir elementos
10. <section class=”flex-container”> <div class=”pera”></div> <div class=”uva”></div> <div class=”maca”></div> </section>
12. .flex-container { display: flex; }
14. .flex-container { display: flex; flex-flow: row; }
16. .flex-container { display: flex; flex-flow: row-reverse; }
18. .flex-container { display: flex; flex-flow: column; }
20. .flex-container { display: flex; flex-flow: column-reverse; }
22. .flex-container { display: flex; flex-flow: row wrap; }
24. .pera, .uva, .maca { width: 40%; }
26. .flex-container { display: flex; flex-flow: row; height: 100vh; }
28. .pera, .uva, .maca { margin: auto; }
30. margin: auto;
32. tem mais
33. .pera { order: 2; } .uva { order: 1; } .maca { order: 3; }
35. .pera, .maca { flex-grow: 1; } .uva { flex-grow: 2; }
37. .flex-container { height: 100vh; display: flex; align-content: center; } ou… flex-start, flex-end, stretch
39. tem mais align-self, flex-basis, flex-shrink, justify-content...
40. can I...
42. flexbugs
45. #milMaravilha … certo?
47. .flex-container { display: -webkit-box; display: -moz-box; -moz-display: flex; -ms-display: flexbox; display: -ms-flexbox; display: -webkit-flex; display: flex; }
48. .uva { -webkit-box-ordinal-group: 2; -moz-box-ordinal-group: 2; order: 2; -webkit-order: 2; -moz-order: 2; -ms-order: 2; }
49. keep calm
50. _flexmixins.scss PRIMEIRA CONTRIB PRA @TEGRAOSS
51. @mixin display-flex { display: -webkit-box; display: -moz-box; -moz-display: flex; -ms-display: flexbox; display: -ms-flexbox; display: -webkit-flex; display: flex; }
52. .flex-container { @include display-flex; }
53. .flex-container { @include display-flex; @include flex-flow(row wrap); }
54. .flex-container { @include display-flex; @include flex-flow(row wrap); @include align-content(space-around); }
55. .uva { @include order(2); }
59. resumão - markup limpa - melhor SEO - responsividade - CSS semântico
60. cheatsheet css-tricks.com/snippets/css/a-guide-to-flexbox/
61. valeu! http://felipebernardes.github.io bernardes.flp@gmail.com