Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Layouts flexiveis com Flex-box

Layouts flexiveis com Flex-box

Campinas Front-End Meetup

Roger Albino

June 26, 2015
Tweet

More Decks by Roger Albino

Other Decks in Programming

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