1.
Adiós float…
¡Hola flexbox!
by @rubenbpv

2.
Evolución de las estrategias de layouts
http://es.slideshare.net/freshlybakedpixels/the-power-of-css-flexbox

3.
Evolución de las estrategias de layouts
http://es.slideshare.net/freshlybakedpixels/the-power-of-css-flexbox

4.
Evolución de las estrategias de layouts
http://es.slideshare.net/freshlybakedpixels/the-power-of-css-flexbox

5.
Evolución de las estrategias de layouts
http://es.slideshare.net/freshlybakedpixels/the-power-of-css-flexbox

6.
Evolución de las estrategias de layouts
http://es.slideshare.net/freshlybakedpixels/the-power-of-css-flexbox
Flexbox es un modo de layout que
proporciona la disposición de elementos en
una página tal que los elementos tienen un
comportamiento predecible cuando el
diseño se ajusta a diferentes tamaños de
pantalla y diferentes dispositivos.

7.
Soporte de navegadores
http://caniuse.com/#search=flexbox
Bugs en navegadores:
https://github.com/philipwalton/flexbugs

8.
Container / Items
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

9.
Container: propiedades
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
flex-direction
flex-wrap

10.
Container: propiedades
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
justify-content align-items align-content

11.
Items: propiedades
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
order
flex-grow

12.
Items: propiedades
https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
flex-shrink
flex-basis

13.
Items: propiedades
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
align-self
flex
Nos permite acortar la definición de flex-grow flex-shrink y flex-basis

14.
Soportando navegadores antiguos
● Usa MODERNIZR para detectar
navegadores que no soportan Flexbox.
● Usa AUTOPREFIXER para olvidarte de
los estilos prefix de navegadores
antiguos. Te protegerá de las variantes
de sintaxis de flexbox (hay 3 distintas)
● Usar FALLBACKS sin tener que usar
Modernizr.

15.
EJEMPLOS DE LAS
VENTAJAS
DE USO DE FLEXBOX

16.
Igualando altura
http://es.slideshare.net/freshlybakedpixels/the-power-of-css-flexbox

17.
Ajuste automático de la anchura
http://es.slideshare.net/freshlybakedpixels/the-power-of-css-flexbox

18.
Tamaño inteligente
http://es.slideshare.net/zomigi/enhancing-responsiveness-with-flexbox-css-conf-eu-2015
width: 33,333% width: 16,666%
flex: 1 1 auto flex: 0 0 auto
sin flexbox
con flexbox

19.
Breakpoints automáticos
El tamaño del campo controla su “wrapping point” sin usar media queries
http://es.slideshare.net/zomigi/enhancing-responsiveness-with-flexbox-css-conf-eu-2015

20.
Mejorando el “wrapping” en layouts RWD
http://es.slideshare.net/zomigi/enhancing-responsiveness-with-flexbox-css-conf-eu-2015
align-content:
space-between

21.
Reubicando elementos
http://es.slideshare.net/zomigi/enhancing-responsiveness-with-flexbox-css-conf-eu-2015
Desktop: html (sin flexbox)móvil: reordenado

22.
Sticky footer
https://philipwalton.github.io/solved-by-flexbox/

23.
Y esto sólo es
la punta del iceberg

24.
Gracias :)