descomplicando o alinhamento com css
TRANSCRIPT
Descomplicando o alinhamento
com CSS
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/
