descomplicando o alinhamento com css

Descomplicando o alinhamento

com CSS

Fernanda Bernardo

fernanda.bernardo@elo7.com

FernandaBernardo

@Feh_Bernardo

Fernanda Bernardo

CSS

Wee

Flexbox

Float Position

Vertical Align

Transform

CSS Grid Layout

Display

Flexbox

CSS Grid Layout

Float

Vertical Align

Display

Transform

Position

Grid LayoutFlexbox

https://youtu.be/vPryjyFP5FM

Suporte

Flexbox

CSS Grid Layout

Chrome Safari Firefox Opera IE Android IOS

21+ 6.1+ 22+ 12.1+ 11+ 4.4+ 7.1+

DESKTOP

Chrome Opera Firefox IE Edge Safari

57+ 44+ 52+ 11+ 15+ 10.1+

MOBILE / TABLET

IOS Safari Opera Mobile Opera Mini Android Android Chrome Android Firefox

10.3 No No No 57+ 52+

Flexbox

display

flex-direction

flex-direction

flex-wrap

flex-wrap

flex-start

justify-content:

flex-start

flex-end

justify-content:

flex-start

flex-end

center

justify-content:

flex-start

flex-end

center

space-between

justify-content:

flex-start

flex-end

center

space-between

space-around

justify-content:

align-content

justify-content ???

HORIZONTAL

VERTICAL

align-content

align-items

flex-start

align-items

flex-end

flex-start

align-items

center

flex-end

flex-start

order

order

order

align-self center

flex-end

align-self center

flex-end

Grid Layout

display

display

display

grid-template

grid-template

150px 150pxauto

grid-template

grid-template

100px

100px

grid-template

100px

100px

Uma fração do espaço disponível no container do grid

fr unit

grid-template

1fr 1fr 1fr 1fr

grid-template

grid-row / grid-column

col1 col2 col3 col4 col5 col6

row3

row2

row1

grid-row / grid-column

grid-row / grid-column

grid-row / grid-column

grid-row / grid-column

1 2 3 4

grid-area

grid-areas

grid-gap

Conclusões

CSS Grid - layouts maiores

Flexbox - layouts menores

CSS Grid - 2 dimensões

Flexbox - 1 dimensão

Não é preciso escolher entreum ou outro.

É possível usar os dois em conjunto.

Bibliografia

● https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_Grid_Layout

● https://developers.google.com/web/updates/2017/01/css-grid

● https://gridbyexample.com

● http://labs.jensimmons.com/

● http://cssgridgarden.com/

● https://flexboxfroggy.com/

fernanda.bernardo@elo7.comFernandaBernardo

@Feh_Bernardo