Campinas Front-End Meetup
Layouts flexíveisLayouts flexíveiscom Flex-boxcom Flex-box
View Slide
Roger AlbinoRoger AlbinoSou desenvolvedor front-endna Vorax, em Mogi Mirim.Front-ender, músico, e jogadorde Pump it Up
ContainerContainer
.container {display: flex; /* or inline-flex */}Container
.container {flex-direction: row | row-reverse | column | column-reverse;}Direction
.container{flex-wrap: nowrap | wrap | wrap-reverse;}Wrap
flex-flow: <‘flex-direction’> || <‘flex-wrap’>Shorthand para flex-direction e flex-wrap
.container {justify-content: flex-start | flex-end | center | space-between | space-around;}Justify Content
.container {align-items: flex-start | flex-end | center | baseline | stretch;}Align-items
.container {align-content: flex-start | flex-end | center | space-between | space-around | stretch;}align-content
Flex-itemFlex-item
.item {order: ;}order
.item {flex-grow: ; /* default 0 */}Flex-grow
.item {flex-shrink: ; /* default 1 */}Flex-shrink
.item {flex-basis: | auto; /* default auto */}Flex-basis
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
.item {align-self: auto | flex-start | flex-end | center | baseline | stretch;}Align-self
Posso usar?Posso usar?
http://caniuse.com/#feat=flexbox
@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
ReferênciasReferênciashttps://css-tricks.com/snippets/css/a-guide-to-flexboxhttp://www.w3.org/TR/css-flexbox-1/https://developer.mozilla.org/pt-BR/docs/CSS/Usando_caixas_flexiveis_csshttp://www.livrosdomaujor.com.br/css3/index.php
Sites uteisSites uteishttp://flexiejs.com/playground/http://the-echoplex.net/flexyboxes/
Obrigado.Obrigado.