Post on 21-Apr-2017
Maurício Samy Silva
Maujor®
http://kwz.me/AZ http://kwz.me/DC http://kwz.me/Dh maujor@maujor.com
FlexboxUma visão geral
block layoutinline layouttable layoutpositioned layout
Modelo layout CSS 3
Modelos layout CSS 2.1
flexible box layout (flex layout)
container
block layoutvertical axis
box 1
box 2
box 3
de cima
para baixo
container
para
d
ireita
inline layout
box 1 box 2 box 3
da e
sque
rda
horizontal axis
block / inline layout
main axiscr
oss a
xis
flex layout
main axiscr
oss a
xis
mai
n ax
iscross axis
flex layoutstart
star
t
end
endstart
end
star
t
end
.container { display: flex; }DIV P SPAN
main axis
flexitem
flexitem
flexitem
flex items = .container > *
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
Suporte
Propriedades para containerjustify-contentflex-directionalign-contentalign-itemsflex-wrapflex-flowdisplay
Propriedades para flex-itemsflex-shrinkflex-basisflex-growalign-self
orderflex
Flex layout
na prática ao vivo e a cores
interface interativa
ir para a interface
Dúvidas?
Obrigado