Layouts flexiveis com Flex-box

Campinas Front-End Meetup

Transcript

1. Layouts flexíveis
   Layouts flexíveis
   com Flex-box
   com Flex-box
   

   View Slide

2. Roger Albino
   Roger Albino
   Sou desenvolvedor front-end
   na Vorax, em Mogi Mirim.
   Front-ender, músico, e jogador
   de Pump it Up
   

   View Slide

3. View Slide

4. Container
   Container
   

   View Slide

5. .container {
   display: flex; /* or inline-flex */
   }
   Container
   

   View Slide

6. .container {
   flex-direction: row | row-reverse | column | column-reverse;
   }
   Direction
   

   View Slide

7. .container{
   flex-wrap: nowrap | wrap | wrap-reverse;
   }
   Wrap
   

   View Slide

8. flex-flow: <‘flex-direction’> || <‘flex-wrap’>
   Shorthand para flex-direction e flex-wrap
   

   View Slide

9. .container {
   justify-content: flex-start | flex-end | center | space-between | space-around;
   }
   Justify Content
   

   View Slide

10. .container {
    align-items: flex-start | flex-end | center | baseline | stretch;
    }
    Align-items
    

    View Slide

11. .container {
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
    }
    align-content
    

    View Slide

12. Flex-item
    Flex-item
    

    View Slide

13. .item {
    order: ;
    }
    order
    

    View Slide

14. .item {
    flex-grow: ; /* default 0 */
    }
    Flex-grow
    

    View Slide

15. .item {
    flex-shrink: ; /* default 1 */
    }
    Flex-shrink
    

    View Slide

16. .item {
    flex-basis: | auto; /* default auto */
    }
    Flex-basis
    

    View Slide

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
    

    View Slide

18. .item {
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
    }
    Align-self
    

    View Slide

19. Posso usar?
    Posso usar?
    

    View Slide

20. http://caniuse.com/#feat=flexbox
    

    View Slide

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
    

    View Slide

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
    

    View Slide

23. Sites uteis
    Sites uteis
    http://flexiejs.com/playground/
    http://the-echoplex.net/flexyboxes/
    

    View Slide

24. Obrigado.
    Obrigado.
    

    View Slide