Flexbox: deixando de odiar o CSS

Transcript

1. Flexbox Deixando de odiar o CSS
2. GUILHERME VIEIRA. @gitlherme Desenvolvedor Front-end na Prefeitura de São Paulo e Coordenador do perifaCode.
3. O que é o flexbox • É amor; • Modelo de layout unidimensional (row ou column); • Distribuição de espaço entre itens numa interface; • Flex Container: flex-direction, justify-content e align-items;
4. O que iremos construir
5. O que iremos construir • Desenvolver um menu de navegação usando flexbox;
6. O que iremos construir
7. Flex Container e Flex Item Tudo que for marcado como “display: flex” se torna um Flex Container e tudo que estiver dentro desse container se torna um Flex Item
8. Flex Container - display: flex; • Torna a classe, tag, etc, como flex; • Define o flex-direction como row;
9. Flex Container - flex-direction; • Define a direção dos itens dentro do Flex Container; • row, row-reverse, column, column-reverse; • Por padrão, usa row; flex-direction: column; flex-direction: row;
10. Flex Container - justify-content; • Alinha os itens do container de acordo com a direção; • Os itens não podem estar ocupando todo o container; • flex-start, flex-end, center, space-between, space-around;
11. Flex Container - justify-content; justify-content: flex-start;
12. Flex Container - justify-content; justify-content: flex-end;
13. Flex Container - justify-content; justify-content: center;
14. Flex Container - justify-content; justify-content: space-between;
15. Flex Container - justify-content; justify-content: space-around;
16. Flex Container - align-items; • Alinha os itens do container de acordo com o eixo; • Permite o alinhamento vertical; • stretch, flex-start, flex-end, center, baseline; EU TE AMO MUITO ALIGN-ITEMS <3
17. Flex Container - align-items; align-items: stretch;
18. Flex Container - align-items; align-items: flex-start;
19. Flex Container - align-items; align-items: flex-end;
20. Flex Container - align-items; align-items: baseline; Fonte: Origamid
21. Flex Container - align-items; align-items: center;
22. Flex Container - Recapitulando Com apenas 4 linhas montamos um navbar de forma simples display: flex; flex-direction: row; justify-content: space-around; align-items: center;
23. Flex Items • Manipular e organizar o elemento (item) que está dentro de um container flex; • flex-grow, flex-basis, flex-shrink, flex, order, align-self;
24. Flex Items - align-self;
25. Flex Items - align-self;
26. Links úteis Artigos • https://origamid.com/projetos/flexbox-guia-completo/ • https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_Flexible_Box_Layout/Conceitos_Basicos_do_Flexbox • https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Jogos • https://flexboxfroggy.com/ Projetos • https://codepen.io/mellmiranda/pens/public/?grid_type=list
27. Obrigado! Twitter: @gitlherme Instagram: @gitlherme Github: @gitlherme Facebook: /guih.dev LinkedIn: /in/guihdev