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

589 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

×