Charla de Rubén Bernárdez en el Open Space 10 aniversario de Biko. ¡Adiós float, hola Flex Box! Maquetación de layouts para los navegadores de hoy Desde hace ya mucho tiempo existe una alternativa a los float para maquetar los layouts de nuestros proyectos. Da solución a muchos de los problemas habituales en maquetación, simplifica el código y tendremos un código preparado para el futuro. Enseñaremos qué puede hacer esta característica de CSS3 en ejemplos reales de proyectos hechos en Biko.

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 :)