Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

¡Hola flexbox! Adiós float...

1,243 views

Published on

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.

Published in: Internet
  • Be the first to comment

¡Hola flexbox! Adiós float...

  1. 1. Adiós float… ¡Hola flexbox! by @rubenbpv
  2. 2. Evolución de las estrategias de layouts http://es.slideshare.net/freshlybakedpixels/the-power-of-css-flexbox
  3. 3. Evolución de las estrategias de layouts http://es.slideshare.net/freshlybakedpixels/the-power-of-css-flexbox
  4. 4. Evolución de las estrategias de layouts http://es.slideshare.net/freshlybakedpixels/the-power-of-css-flexbox
  5. 5. Evolución de las estrategias de layouts http://es.slideshare.net/freshlybakedpixels/the-power-of-css-flexbox
  6. 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. 7. Soporte de navegadores http://caniuse.com/#search=flexbox Bugs en navegadores: https://github.com/philipwalton/flexbugs
  8. 8. Container / Items https://css-tricks.com/snippets/css/a-guide-to-flexbox/
  9. 9. Container: propiedades https://css-tricks.com/snippets/css/a-guide-to-flexbox/ flex-direction flex-wrap
  10. 10. Container: propiedades https://css-tricks.com/snippets/css/a-guide-to-flexbox/ justify-content align-items align-content
  11. 11. Items: propiedades https://css-tricks.com/snippets/css/a-guide-to-flexbox/ order flex-grow
  12. 12. Items: propiedades https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties flex-shrink flex-basis
  13. 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. 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. 15. EJEMPLOS DE LAS VENTAJAS DE USO DE FLEXBOX
  16. 16. Igualando altura http://es.slideshare.net/freshlybakedpixels/the-power-of-css-flexbox
  17. 17. Ajuste automático de la anchura http://es.slideshare.net/freshlybakedpixels/the-power-of-css-flexbox
  18. 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. 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. 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. 21. Reubicando elementos http://es.slideshare.net/zomigi/enhancing-responsiveness-with-flexbox-css-conf-eu-2015 Desktop: html (sin flexbox)móvil: reordenado
  22. 22. Sticky footer https://philipwalton.github.io/solved-by-flexbox/
  23. 23. Y esto sólo es la punta del iceberg
  24. 24. Gracias :)

×