Layouts flexiveis com Flex-box

Campinas Front-End Meetup

Transcript

1. Layouts flexíveis Layouts flexíveis com Flex-box com Flex-box
2. Roger Albino Roger Albino Sou desenvolvedor front-end na Vorax, em Mogi Mirim. Front-ender, músico, e jogador de Pump it Up
4. Container Container
5. .container { display: flex; /* or inline-flex */ } Container
6. .container { flex-direction: row | row-reverse | column | column-reverse; } Direction
7. .container{ flex-wrap: nowrap | wrap | wrap-reverse; } Wrap
8. flex-flow: <‘flex-direction’> || <‘flex-wrap’> Shorthand para flex-direction e flex-wrap
9. .container { justify-content: flex-start | flex-end | center | space-between | space-around; } Justify Content
10. .container { align-items: flex-start | flex-end | center | baseline | stretch; } Align-items
11. .container { align-content: flex-start | flex-end | center | space-between | space-around | stretch; } align-content
12. Flex-item Flex-item
13. .item { order: <integer>; } order
14. .item { flex-grow: <number>; /* default 0 */ } Flex-grow
15. .item { flex-shrink: <number>; /* default 1 */ } Flex-shrink
16. .item { flex-basis: <length> | auto; /* default auto */ } Flex-basis
17. flex: none; /* 1 valor: flex-grow */ flex: 2; /* 1 valor: flex-basis */ flex: 30px; /* 2 valores: flex-grow | flex-basis */ flex: 1 30px; /* 2 valores: flex-grow | flex-shrink */ flex: 2 2; /* 3 valores: flex-grow | flex-shrink | flex-basis */ flex: 2 2 10%; Flex
18. .item { align-self: auto | flex-start | flex-end | center | baseline | stretch; } Align-self
19. Posso usar? Posso usar?
20. http://caniuse.com/#feat=flexbox
21. @mixin flexbox() { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } @mixin flex($values) { -webkit-box-flex: $values; -moz-box-flex: $values; -webkit-flex: $values; -ms-flex: $values; flex: $values; } @mixin order($val) { -webkit-box-ordinal-group: $val; -moz-box-ordinal-group: $val; -ms-flex-order: $val; -webkit-order: $val; order: $val; } SCSS
22. Referências Referências https://css-tricks.com/snippets/css/a-guide-to-flexbox http://www.w3.org/TR/css-flexbox-1/ https://developer.mozilla.org/pt- BR/docs/CSS/Usando_caixas_flexiveis_css http://www.livrosdomaujor.com.br/css3/index.php
23. Sites uteis Sites uteis http://flexiejs.com/playground/ http://the-echoplex.net/flexyboxes/
24. Obrigado. Obrigado.