flexbox - uma visão geral
TRANSCRIPT
![Page 1: FlexBox - Uma visão geral](https://reader034.vdocuments.net/reader034/viewer/2022051520/58f9b342760da3da068bd447/html5/thumbnails/1.jpg)
![Page 3: FlexBox - Uma visão geral](https://reader034.vdocuments.net/reader034/viewer/2022051520/58f9b342760da3da068bd447/html5/thumbnails/3.jpg)
FlexboxUma visão geral
![Page 4: FlexBox - Uma visão geral](https://reader034.vdocuments.net/reader034/viewer/2022051520/58f9b342760da3da068bd447/html5/thumbnails/4.jpg)
block layoutinline layouttable layoutpositioned layout
Modelo layout CSS 3
Modelos layout CSS 2.1
flexible box layout (flex layout)
![Page 5: FlexBox - Uma visão geral](https://reader034.vdocuments.net/reader034/viewer/2022051520/58f9b342760da3da068bd447/html5/thumbnails/5.jpg)
container
block layoutvertical axis
box 1
box 2
box 3
de cima
para baixo
![Page 6: FlexBox - Uma visão geral](https://reader034.vdocuments.net/reader034/viewer/2022051520/58f9b342760da3da068bd447/html5/thumbnails/6.jpg)
container
para
d
ireita
inline layout
box 1 box 2 box 3
da e
sque
rda
horizontal axis
![Page 7: FlexBox - Uma visão geral](https://reader034.vdocuments.net/reader034/viewer/2022051520/58f9b342760da3da068bd447/html5/thumbnails/7.jpg)
block / inline layout
main axiscr
oss a
xis
![Page 8: FlexBox - Uma visão geral](https://reader034.vdocuments.net/reader034/viewer/2022051520/58f9b342760da3da068bd447/html5/thumbnails/8.jpg)
flex layout
main axiscr
oss a
xis
mai
n ax
iscross axis
![Page 9: FlexBox - Uma visão geral](https://reader034.vdocuments.net/reader034/viewer/2022051520/58f9b342760da3da068bd447/html5/thumbnails/9.jpg)
flex layoutstart
star
t
end
endstart
end
star
t
end
![Page 10: FlexBox - Uma visão geral](https://reader034.vdocuments.net/reader034/viewer/2022051520/58f9b342760da3da068bd447/html5/thumbnails/10.jpg)
.container { display: flex; }DIV P SPAN
main axis
flexitem
flexitem
flexitem
flex items = .container > *
![Page 11: FlexBox - Uma visão geral](https://reader034.vdocuments.net/reader034/viewer/2022051520/58f9b342760da3da068bd447/html5/thumbnails/11.jpg)
adeus: float e clear;alinhamento: à esquerda, à direita, no centro, embaixo e em cima;ordem visual: invertida ou rearranjada;adaptar: as dimensões ao espaço disponível;equalizar: a altura.
Soluções
![Page 12: FlexBox - Uma visão geral](https://reader034.vdocuments.net/reader034/viewer/2022051520/58f9b342760da3da068bd447/html5/thumbnails/12.jpg)
Suporte
![Page 13: FlexBox - Uma visão geral](https://reader034.vdocuments.net/reader034/viewer/2022051520/58f9b342760da3da068bd447/html5/thumbnails/13.jpg)
Propriedades para containerjustify-contentflex-directionalign-contentalign-itemsflex-wrapflex-flowdisplay
![Page 14: FlexBox - Uma visão geral](https://reader034.vdocuments.net/reader034/viewer/2022051520/58f9b342760da3da068bd447/html5/thumbnails/14.jpg)
Propriedades para flex-itemsflex-shrinkflex-basisflex-growalign-self
orderflex
![Page 15: FlexBox - Uma visão geral](https://reader034.vdocuments.net/reader034/viewer/2022051520/58f9b342760da3da068bd447/html5/thumbnails/15.jpg)
Flex layout
na prática ao vivo e a cores
interface interativa
ir para a interface
![Page 16: FlexBox - Uma visão geral](https://reader034.vdocuments.net/reader034/viewer/2022051520/58f9b342760da3da068bd447/html5/thumbnails/16.jpg)
Dúvidas?
![Page 17: FlexBox - Uma visão geral](https://reader034.vdocuments.net/reader034/viewer/2022051520/58f9b342760da3da068bd447/html5/thumbnails/17.jpg)
Obrigado