L U C A S M U R T A
C O N C E I T O
S O B R E
G R I D‘ S
float: left
display: flex
F L E X B O X
T R A B A L H A N D O
C O M
F L E X B O X
Display Flex
.row{
display: flex;
}
*/Primeira regra para utilizar o FlexBox/*
Flex Direction
.row{
display: flex;
flex-direction: row|column|row-reverse|column-reverse ;
}
Flex Direction
Flex Wrap
.row{
display: flex;
flex-direction: row ;
flex-wrap: nowrap|wrap|wrap-reverse ;
}
Wrap
No Wrap
Justify Content
.row{
display: flex;
flex-direction: row ;
flex-wrap: nowrap ;
justify-content:
flex-start|flex-end|center|space-between|space-around
;
}
Flex Start
Flex End
Center
Space Between
Space Around
Align Items
.row{
display: flex;
flex-direction: row ;
flex-wrap: nowrap ;
justify-content: flex-start ;
align-items:
flex-start|flex-end|center|stretch|baseline
;
}
Flex Start
Flex End
Center
Stretch
Align Content
.row{
display: flex;
flex-direction: row ;
flex-wrap: nowrap ;
justify-content: flex-start ;
align-items: flex-start ;
Align-content: flex-start|flex-end
center|stretch|space-between|space-around ;
}
Flex Start
Flex End
Center
Space Between
Space Around
Stretch
E L E M E N T O S
C H I L D
Atributos Child
.row div:nth-child(1){
order: <numeral> ;
flex-flow: <numeral> ;
align-self:
auto|flex-start|flex-end|center|stretch|baseline
;
}
T R A B A L H A N D O
C O M P A D R Õ E S
U T I L I Z A N D O
F L E X B O X
Padrões Flexbox
.row{
display: flex;
flex-wrap: wrap ;
}
B O O T S T R A P 4 . 0
F L E X B O X
Bootstrap 4.0
// Creates a wrapper for a series of columns�@mixin make-row($gutter: $grid-gutter-width) {� @if $enable-flex {� display: flex;� flex-wrap: wrap;� } @else {� @include clearfix();� }� margin-left: ($gutter / -2);� margin-right: ($gutter / -2);�}�
Bootstrap 4.0
Alinhamento Horizontal
<div class="row flex-items-xs-left">� <div class="col-xs-3">� One of three columns� </div>�</div>�<div class="row flex-items-xs-right">� <div class="col-xs-3">� One of three columns� </div>�</div>�<div class="row flex-items-xs-center">� <div class="col-xs-3">� One of three columns� </div>�</div>
�
Bootstrap 4.0
Alinhamento Horizontal
<div class="row flex-items-xs-around">� <div class="col-xs-3">� One of three columns� </div>�</div>�<div class="row flex-items-xs-between">� <div class="col-xs-3">� One of three columns� </div>�</div>
�
Bootstrap 4.0
Alinhamento Vertical
<div class="row flex-items-xs-top">� <div class="col-xs-3 flex-xs-top">� One of three columns� </div>�</div>�<div class="row flex-items-xs-middle">� <div class="col-xs-3 flex-xs-middle">� One of three columns� </div>�</div>�<div class="row flex-items-xs-bottom">� <div class="col-xs flex-bottom">� One of three columns� </div>�</div>
�
L U C A S M U R T A
O B R I G A D O