That's presentation it's about flex-box

Transcript

1. Flexibilizando sua vida com Flex
2. Who am I
3. • Alinhar ao centro vertical e horizontal • Posicionar itens na tela • Divisão de espaço • Fazer itens se ajustarem ao tamanho de tela
5. Alguém já passou por isso antes!!!
6. Flexbox
7. O que é Flexbox?? • O Flexbox é um conceito do CSS3 Serve para: • organizar os elementos de uma página HTML dentro de seus containers de forma dinâmica. • as dimensões não importam para manter um layout flexível dentro do elemento pai • reorganiza elementos de acordo com a necessidade.
8. Primeiro!!!! Criar container você deve!
9. Atributos de container flex-direction
10. Eixos são importantes: flex-direction O primeiro passo pra se dar bem com flex é saber se orientar em horizontal e vertical
11. flex-wrap nowrap wrap / wrap-reverse
12. flex-flow: row nowrap; flex-flow: column nowrap; flex-flow: row wrap;
13. justify-content Define o alinhamento dos itens ao longo do eixo principal do container Só funciona se os itens atuais não ocuparem todo o container flex-start flex-end center space-between space-around
14. align-items Define como as linhas são distribuídas ao longo do eixo transversal do container stretch flex-start flex-end center baseline
15. align-content stretch flex-start flex-end space-between center space-around
16. Propriedade de Itens Criar itens você deve!
17. flex-grow – Como era o Comercial? Cresce cresce saudável?
18. flex-basis auto numero+medida 0
19. flex-shrink
20. flex: 0 1 auto; flex: 2; flex: 3 2 300px;
21. order
22. align-self stretch flex-start flex-end auto baseline center
24. Links úteis e bibliografia