O documento discute CSS Flexbox, um módulo do CSS usado para criar layouts flexíveis e responsivos sem flutuação ou posicionamento. Ele explica propriedades como display, flex-direction, justify-content, align-items e flex-wrap, que controlam o posicionamento e alinhamento dos itens dentro do container flexível.

1. Professor
José de Assis
CSS
Flexbox
CSS
Flexbox

2. Professor
José de Assis
CSS FlexBox é um módulo do CSS
usado na construção do layout.
O CSS FlexBox torna mais fácil
projetar uma estrutura de layout
responsiva e flexível sem usar
flutuação ou posicionamento.
CSS
Flexbox

3. Professor
José de Assis
CSS
Flexbox
.Container {
display: flex; /* padrão: linha */
}
Container
itens

4. Professor
José de Assis
flex-direction
CSS
Flexbox
Esta propriedade define a direção em que
os itens são posicionados no container.

5. Professor
José de Assis
CSS
Flexbox
row
row-reverse

6. Professor
José de Assis
CSS
Flexbox
column column-reverse

7. Professor
José de Assis
justify-content
CSS
Flexbox
Esta propriedade define o alinhamento
dos itens no container.

8. Professor
José de Assis
CSS
Flexbox
flex-start
flex-end

9. Professor
José de Assis
CSS
Flexbox
center
space-between

10. Professor
José de Assis
CSS
Flexbox
space-around
space-evenly

11. Professor
José de Assis
align-items
CSS
Flexbox
Esta propriedade permite alinhar itens
com alturas diferentes.

12. Professor
José de Assis
CSS
Flexbox
Text
Text
Text
Text
Text
stretch
Text Text Text
itens

13. Professor
José de Assis
CSS
Flexbox
Text
Text
Text
Text
flex-start
flex-end
Text
Text
Text Text

14. Professor
José de Assis
CSS
Flexbox
Text
Text
Text
Text
center
baseline
Text Text Text Text

15. Professor
José de Assis
flex-wrap
CSS
Flexbox
Esta propriedade define a quebra de
linha no container.

16. Professor
José de Assis
CSS
Flexbox
2
no-wrap
1 3
itens
2
1 3 1 2
4
4

17. Professor
José de Assis
CSS
Flexbox
2
wrap
3 4
1
2
1

18. Professor
José de Assis
CSS
Flexbox
4
wrap-reverse
1 2
3
3
4