Flexbox

Dissecando um pouco do Flexbox

Transcript

1. @_danilovaz
2. Front-end na Organizador da Organizador do Danilo Vaz
4. Puxa aqui, puxa ali...
5. Quem nunca?
7. O que é Flexbox? Forma mais eficiente de criar layouts Alinha e distribui o espaço entre os itens de um container Habilidade de alterar sua altura e largura para caber no espaço disponível Um display CSS -> display: flex
8. Propriedades do Container
9. flex-direction: row
10. Demo
11. flex-direction: row-reverse
12. Demo
13. flex-direction: column
14. Demo
15. flex-direction: column-reverse
16. Demo
17. flex-wrap: nowrap
18. Demo
19. flex-wrap: wrap
20. Demo
21. flex-wrap: wrap-reverse
22. Demo
23. Resumindo: .container { display: flex; /*flex-flow: <flex-direction> || <flex-wrap>;*/ flex-flow: row wrap; }
24. Demo
25. justify-content: flex-start
26. Demo
27. justify-content: flex-end
28. Demo
29. justify-content: center
30. Demo
31. justify-content: space-between
32. Demo
33. justify-content: space-around
34. Demo
35. align-items: stretch
36. Demo
37. align-items: flex-start
38. Demo
39. align-items: flex-end
40. Demo
41. align-items: center
42. Demo
43. align-items: baseline
44. Demo
45. align-content: stretch
46. Demo
47. align-content: flex-start
48. Demo
49. align-content: flex-end
50. Demo
51. align-content: center
52. Demo
53. align-content: space-between
54. Demo
55. align-content: space-around
56. Demo
57. Propriedades dos Itens
58. order: <integer>
59. Demo
60. flex-grow: <integer>
61. Demo
62. flex-basis: auto || <width>
63. Demo
64. align-self
65. Demo
66. Notas importantes Float, clear e vertical-align não afetam os itens do container Os pseudo-elementos :first-line e :first- letter não funcionam nos containers A W3C indica a utilização da sintaxe: Flex: none | auto | [ <flex-grow> <flex- shrink>? || <flex-basis> ]
67. Suporte Flexbox
68. Flexbox Older Browers https://github.com/jonathantneal/flexibility
69. Exemplo Simples