1 of 36

2 of 36

L U C A S M U R T A

3 of 36

C O N C E I T O

S O B R E

G R I D‘ S

4 of 36

5 of 36

float: left

6 of 36

7 of 36

8 of 36

display: flex

9 of 36

F L E X B O X

10 of 36

11 of 36

T R A B A L H A N D O

C O M

F L E X B O X

12 of 36

Display Flex

.row{

display: flex;

}

*/Primeira regra para utilizar o FlexBox/*

13 of 36

14 of 36

Flex Direction

.row{

display: flex;

flex-direction: row|column|row-reverse|column-reverse ;

}

15 of 36

Flex Direction

16 of 36

Flex Wrap

.row{

display: flex;

flex-direction: row ;

flex-wrap: nowrap|wrap|wrap-reverse ;

}

17 of 36

Wrap

No Wrap

18 of 36

Justify Content

.row{

display: flex;

flex-direction: row ;

flex-wrap: nowrap ;

justify-content:

flex-start|flex-end|center|space-between|space-around

;

}

19 of 36

Flex Start

Flex End

Center

Space Between

Space Around

20 of 36

Align Items

.row{

display: flex;

flex-direction: row ;

flex-wrap: nowrap ;

justify-content: flex-start ;

align-items:

flex-start|flex-end|center|stretch|baseline

;

}

21 of 36

Flex Start

Flex End

Center

Stretch

22 of 36

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 ;

}

23 of 36

Flex Start

Flex End

Center

Space Between

Space Around

Stretch

24 of 36

E L E M E N T O S

C H I L D

25 of 36

26 of 36

Atributos Child

.row div:nth-child(1){

order: <numeral> ;

flex-flow: <numeral> ;

align-self:

auto|flex-start|flex-end|center|stretch|baseline

;

}

27 of 36

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

28 of 36

29 of 36

Padrões Flexbox

.row{

display: flex;

flex-wrap: wrap ;

}

30 of 36

B O O T S T R A P 4 . 0

F L E X B O X

31 of 36

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);�}

32 of 36

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>

33 of 36

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>

34 of 36

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>

35 of 36

L U C A S M U R T A

lucasmurta.com.br

lucas111murta@gmail.com

facebook/totimurta

36 of 36

O B R I G A D O