http://clickmaujor.com/scdevsummit/flex01.html

2. Maurício Samy Silva
Maujor®
http://kwz.me/AZ http://kwz.me/DC http://kwz.me/Dh maujor@maujor.com

3. Flexbox
Uma visão geral

4. block layout
inline layout
table layout
positioned layout
Modelo layout CSS 3
Modelos layout CSS 2.1
flexible box layout (flex layout)

5. container
block layout
verticalaxis
box 1
box 2
box 3
de cima
para baixo

6. container
paradireita
inline layout
box 1 box 2 box 3
daesquerda
horizontal axis

7. block / inline layout
main axis
crossaxis

8. flex layout
main axis
crossaxis
mainaxis
cross axis

9. flex layout
start
start
end
end
start
end
start
end

10. .container { display: flex; }
DIV P SPAN
main axis
flex
item
flex
item
flex
item
flex items = .container > *

11. 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

12. Suporte

13. Propriedades para container
justify-content
flex-direction
align-content
align-items
flex-wrap
flex-flow
display

14. Propriedades para flex-items
flex-shrink
flex-basis
flex-grow
align-self
order
flex

15. Flex layout
na prática ao vivo e a cores
interface interativa
ir para a interface

16. Dúvidas?

17. Obrigado