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.

What is the flexbox

¿De qué trata? De CSS, mucho... bueno, no tanto CSS, pero si será una forma divertida de pensar que de ahora en más no necesitarás los floats nunca!. Por fin, un adiós a esta pesadilla.

  • Login to see the comments

What is the flexbox

  1. 1. Presenta: What's the Flexbox
  2. 2. Hola! Soy Javier Herrera UI Dev / Frontend Expert / Fullstack Teacher www.javier-herrera.com / @jap_solo 3
  3. 3. 4 ¿Hace cuánto que existe la flotación? Desde la especificación de CSS2 - Noviembre 1997
  4. 4. 5 ¿Quiénes siguen usando la flotación?
  5. 5. 6 Todos flotan Georgie, todos flotan!
  6. 6. Float, el MALDITO float! 7 .anterior{ float: left; } .siguiente{ float: right; }
  7. 7. Float, el MALDITO float! 8 .nav{ overflow: hidden; }
  8. 8. Flexbox - CSS3 9
  9. 9. Soporte actual! 10 http://caniuse.com/#search=flexbox/
  10. 10. 11 display: flex; ó display: inline-flex;
  11. 11. 12
  12. 12. 13 Lo primero. Hacer que el container respete los anchos de sus hijos! Si, hablamos del wrap.
  13. 13. 14 default!
  14. 14. 15
  15. 15. 16 ¿Queremos crear Filas o Columnas? Ok, Flexbox lo puede.
  16. 16. 17 default!
  17. 17. 18
  18. 18. 19 ¿Necesitamos alinear el contenido en el main-axis? Ok, Flexbox lo tiene.
  19. 19. 20 default!
  20. 20. 21
  21. 21. 22
  22. 22. 23
  23. 23. 24 Y ¿con el cross-axis puedo hacer algo? Off course, Flexbox lo puede.
  24. 24. 25 default!
  25. 25. 26
  26. 26. 27
  27. 27. 28 Wonderful, pero ¿y qué pasa con los flex-items? Don't worry, Flexbox se la re banca.
  28. 28. 29
  29. 29. 30
  30. 30. 31
  31. 31. 32
  32. 32. 33
  33. 33. 34
  34. 34. ¿Quiénes usan Flexbox? 35
  35. 35. 36
  36. 36. 37
  37. 37. 38
  38. 38. 39
  39. 39. Gracias! A.M.A. Time - (Ask Me Anything) Find me in: @jap_solo & www.javier-herrera.com 40
  40. 40. Web Applications No te pierdas nuestra próxima Meetup 41 Martes, Octubre 24 19hs Lima 1111
  41. 41. Nos dejes de visitarnos o escribirnos 42 https://www.meetup.com/es/The-FullStack-Meetup/ https://twitter.com/fullstackmeet thefullstackmeetup@gmail.com

×