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.

1. Descomplicando o
alinhamento
com CSS
Fernanda Bernardo

2. fernanda.bernardo@elo7.com
FernandaBernard
o
@Feh_Bernardo
Fernanda Bernardo

5. CSS
Wee

6. Flexbox
Float Position
Vertical Align
Transform
CSS Grid
Layout
Display

7. Flexbox
CSS Grid
Layout
Float
Vertical Align
Display
Transform
Position

8. Grid LayoutFlexbox

11. https://youtu.be/vPryjyFP5FM

12. Suporte

13. 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+

14. Flexbox

16. display

17. flex-direction

18. flex-direction

19. flex-wrap

20. flex-wrap

21. flex-start
justify-content:

22. flex-start
flex-end
justify-content:

23. flex-start
flex-end
center
justify-content:

24. flex-start
flex-end
center
space-between
justify-content:

25. flex-start
flex-end
center
space-between
space-around
justify-content:

26. align-content
justify-content ???
HORIZONTAL
VERTICAL
align-content

27. align-items
flex-start

28. align-items
flex-end
flex-start

29. align-items
center
flex-end
flex-start

30. order

31. order

32. order

33. align-self center
flex-end

34. align-self center
flex-end

36. Grid Layout

38. display

39. display

40. display

41. grid-template

42. grid-template
150px 150pxauto

43. grid-template

44. grid-template
100px
100px

45. grid-template
100px
100px

46. Uma fração do espaço disponível no container do grid
fr unit

47. grid-template

48. 1fr 1fr 1fr 1fr
grid-template

49. grid-row / grid-column
col1 col2 col3 col4 col5 col6
row3
row2
row1

50. grid-row / grid-column

51. grid-row / grid-column

52. grid-row / grid-column

53. grid-row / grid-column
1 2 3 4

54. grid-area

55. grid-areas

56. grid-gap

58. Conclusões

59. CSS Grid - layouts maiores
Flexbox - layouts menores

60. CSS Grid - 2 dimensões
Flexbox - 1 dimensão

61. Não é preciso
escolher entre
um ou outro.
É possível usar os
dois em conjunto.

62. 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/

63. fernanda.bernardo@elo7.com
FernandaBernardo
@Feh_Bernardo