Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Descomplicando o
alinhamento
com CSS
Fernanda Bernardo
fernanda.bernardo@elo7.com
FernandaBernard
o
@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 F...
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 entre
um 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/update...
fernanda.bernardo@elo7.com
FernandaBernardo
@Feh_Bernardo
Descomplicando o alinhamento com css
Descomplicando o alinhamento com css
Descomplicando o alinhamento com css
Descomplicando o alinhamento com css
Descomplicando o alinhamento com css
Descomplicando o alinhamento com css
Descomplicando o alinhamento com css
Descomplicando o alinhamento com css
Upcoming SlideShare
Loading in …5
×

Descomplicando o alinhamento com css

666 views

Published on

Alinhar elementos com CSS em qualquer direção sempre é um problema para qualquer front-end. Temos formas "básicas" de fazer isso, mas também temos as novas specs que estão sendo criadas para cuidar dessa questão. Uma delas é o Flexbox, que já não é tão recente assim, e a outra é o CSS Grid, que acabou de sair do forno. Venha aprender de uma forma descomplicada, como usar essas propriedades.

Published in: Technology
  • Be the first to comment

Descomplicando o alinhamento com css

  1. 1. Descomplicando o alinhamento com CSS Fernanda Bernardo
  2. 2. fernanda.bernardo@elo7.com FernandaBernard o @Feh_Bernardo Fernanda Bernardo
  3. 3. CSS Wee
  4. 4. Flexbox Float Position Vertical Align Transform CSS Grid Layout Display
  5. 5. Flexbox CSS Grid Layout Float Vertical Align Display Transform Position
  6. 6. Grid LayoutFlexbox
  7. 7. https://youtu.be/vPryjyFP5FM
  8. 8. Suporte
  9. 9. 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+
  10. 10. Flexbox
  11. 11. display
  12. 12. flex-direction
  13. 13. flex-direction
  14. 14. flex-wrap
  15. 15. flex-wrap
  16. 16. flex-start justify-content:
  17. 17. flex-start flex-end justify-content:
  18. 18. flex-start flex-end center justify-content:
  19. 19. flex-start flex-end center space-between justify-content:
  20. 20. flex-start flex-end center space-between space-around justify-content:
  21. 21. align-content justify-content ??? HORIZONTAL VERTICAL align-content
  22. 22. align-items flex-start
  23. 23. align-items flex-end flex-start
  24. 24. align-items center flex-end flex-start
  25. 25. order
  26. 26. order
  27. 27. order
  28. 28. align-self center flex-end
  29. 29. align-self center flex-end
  30. 30. Grid Layout
  31. 31. display
  32. 32. display
  33. 33. display
  34. 34. grid-template
  35. 35. grid-template 150px 150pxauto
  36. 36. grid-template
  37. 37. grid-template 100px 100px
  38. 38. grid-template 100px 100px
  39. 39. Uma fração do espaço disponível no container do grid fr unit
  40. 40. grid-template
  41. 41. 1fr 1fr 1fr 1fr grid-template
  42. 42. grid-row / grid-column col1 col2 col3 col4 col5 col6 row3 row2 row1
  43. 43. grid-row / grid-column
  44. 44. grid-row / grid-column
  45. 45. grid-row / grid-column
  46. 46. grid-row / grid-column 1 2 3 4
  47. 47. grid-area
  48. 48. grid-areas
  49. 49. grid-gap
  50. 50. Conclusões
  51. 51. CSS Grid - layouts maiores Flexbox - layouts menores
  52. 52. CSS Grid - 2 dimensões Flexbox - 1 dimensão
  53. 53. Não é preciso escolher entre um ou outro. É possível usar os dois em conjunto.
  54. 54. 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/
  55. 55. fernanda.bernardo@elo7.com FernandaBernardo @Feh_Bernardo

×