Como estruturar layouts sem gambiarras.

1. Flexbox
Estruturando layouts sem gambiarras
@afonsopacifer

2. @afonsopacifer

3. I CSS

4. Por que Flexbox?
Não é javascript
É legal
Resolve diversos problemas comuns
Não é muito falado
E o principal …..

5. Não é o futuro!

6. É o presente!

7. Layouts no passado?

8. Table

9. Float

10. http://philipwalton.github.io/solved-by-flexbox/

11. Layouts hoje!

12. Flexbox

13. Flexbox?
Modulo CSS3 que define um novo
box model otimizado para interfaces
CSS Flexible Box Layout Module Level 1

14. Flex Container
Flex Items
Flex Layout

15. Flex Container
Demo
http://codepen.io/afonsopacifer/pen/pJZEJN

16. Flex Items
Demo
http://codepen.io/afonsopacifer/pen/eNjdLr

17. Qual navegador suporta isso?
TODOS!

18. Browsers support
http://caniuse.com/flexbox

19. Cross Browser
autoprefixer
.riojs {
display:flex;
justify-content:center;
}
.riojs {
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-justify-content:center;
-ms-flex-pack:center;
justify-content:center;
}

20. E o IE9?

21. Polyfills
https://github.com/doctyper/reflexie

22. O que dá para fazer?

23. http://flexboxgrid.com/

24. https://afonsopacifer.github.io/flex-grid-framework/

25. A curated list of CSS Flexible Box Layout Module or only Flexbox.
https://github.com/afonsopacifer/awesome-flexbox

26. Obrigado :)