Slide 1
Slide 1 text
Layouts flexíveis
Layouts flexíveis
com Flex-box
com Flex-box
Slide 2
Slide 2 text
Roger Albino
Roger Albino
Sou desenvolvedor front-end
na Vorax, em Mogi Mirim.
Front-ender, músico, e jogador
de Pump it Up
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
Container
Container
Slide 5
Slide 5 text
.container {
display: flex; /* or inline-flex */
}
Container
Slide 6
Slide 6 text
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
Direction
Slide 7
Slide 7 text
.container{
flex-wrap: nowrap | wrap | wrap-reverse;
}
Wrap
Slide 8
Slide 8 text
flex-flow: <‘flex-direction’> || <‘flex-wrap’>
Shorthand para flex-direction e flex-wrap
Slide 9
Slide 9 text
.container {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
Justify Content
Slide 10
Slide 10 text
.container {
align-items: flex-start | flex-end | center | baseline | stretch;
}
Align-items
Slide 11
Slide 11 text
.container {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
align-content
Slide 12
Slide 12 text
Flex-item
Flex-item
Slide 13
Slide 13 text
.item {
order: ;
}
order
Slide 14
Slide 14 text
.item {
flex-grow: ; /* default 0 */
}
Flex-grow
Slide 15
Slide 15 text
.item {
flex-shrink: ; /* default 1 */
}
Flex-shrink
Slide 16
Slide 16 text
.item {
flex-basis: | auto; /* default auto */
}
Flex-basis
Slide 17
Slide 17 text
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
Slide 18
Slide 18 text
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
Align-self
Slide 19
Slide 19 text
Posso usar?
Posso usar?
Slide 20
Slide 20 text
http://caniuse.com/#feat=flexbox
Slide 21
Slide 21 text
@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
Slide 22
Slide 22 text
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
Slide 23
Slide 23 text
Sites uteis
Sites uteis
http://flexiejs.com/playground/
http://the-echoplex.net/flexyboxes/
Slide 24
Slide 24 text
Obrigado.
Obrigado.