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. Roger Albino Roger Albino Sou desenvolvedor front-end na Vorax, em

    Mogi Mirim. Front-ender, músico, e jogador de Pump it Up
  2. 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
  3. @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