Flexbox é uma propriedade CSS que permite organizar itens dentro de um container de forma flexível e responsiva. Com flexbox, é possível alinhar itens ao centro ou nas bordas, distribuí-los de forma uniforme e fazê-los se adaptar ao tamanho da tela. Os atributos como flex-direction, flex-wrap e justify-content controlam o alinhamento dos itens ao longo dos eixos, enquanto align-items e align-content controlam o alinhamento transversal. Propriedades como flex-grow, flex-shrink e flex-basis também permitem

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