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.

Tus themes con flexbox son más responsive - DarioBF

666 views

Published on

Introducción a Flexbox - WordCamp Barcelona 2016

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Tus themes con flexbox son más responsive - DarioBF

  1. 1. dariobf.com #WCBCN TUS THEMES CON FLEXBOX SON MÁS RESPONSIVE DARIOBF EXPERTO EN WORDPRESS #WCBCN @DarioBF
  2. 2. dariobf.com #WCBCN ¡Hola! Soy Darío, diseñadory maquetador front-end. @DarioBF dariobf.com DARIOBF EXPERTO EN WORDPRESS #WCBCN
  3. 3. dariobf.com #WCBCN Diseñador UI/UX Maquetador Front-End Desarrolladorweb WordPress DesarrolladorActualidadBlog Formadory consultorweb OrganizadorWordCamp Santander OrganizadorWPCantabria Editor de traducciones es_ES dariobf.com DARIOBF EXPERTO EN WORDPRESS #WCBCN @DarioBF
  4. 4. dariobf.com #WCBCNhttp://giphy.com/gifs/13XW2MJE0XCoM0
  5. 5. dariobf.com #WCBCN CSS ES INCREIBLE
  6. 6. dariobf.com #WCBCN FLEXBOX ES MUCHO MÁS INCREIBLE
  7. 7. dariobf.com #WCBCN INLINE-BLOCK?¿
  8. 8. dariobf.com #WCBCN FLOAT CLEAR ?¿
  9. 9. TABLAS?¿
  10. 10. dariobf.com #WCBCN 1 - ALGUNAS COSAS SOBRE FLEXBOX
  11. 11. dariobf.com #WCBCN DISTRIBUCIÓN ALINEACIÓN ORDEN } ELEMENTOS
  12. 12. dariobf.com #WCBCN FRAMEWORKS
  13. 13. dariobf.com #WCBCN <div class="col-lg-4 col-md-6 col-sm-9 metamos-mas-clases porque-si“> ...contenido </div> NO ES SEMÁNTICO #WCBCN
  14. 14. dariobf.com #WCBCN display: box; /* 2009 */ display: flexbox; /* 2011 */ display: flex; /* ahora */ EVOLUCIÓN #WCBCN
  15. 15. dariobf.com #WCBCN
  16. 16. dariobf.com #WCBCN 2 - CONCEPTOS
  17. 17. dariobf.com #WCBCN Contenedor #WCBCN
  18. 18. dariobf.com #WCBCN Items #WCBCN
  19. 19. dariobf.com #WCBCN .contenedor { display: flex; } VISUALIZADO #WCBCN
  20. 20. dariobf.com #WCBCN 3 - DISTRIBUCIÓN
  21. 21. dariobf.com #WCBCN .contenedor { display: flex; flex-direction: row | row-reverse | column | column-reverse; } DIRECCIÓN #WCBCN
  22. 22. dariobf.com #WCBCN 1 2 3 4 ROW ROW -REVERSE 4 3 2 1 #WCBCN
  23. 23. dariobf.com #WCBCN COLUMN COLUMN-REVERSE 4 3 2 1 1 2 3 4 #WCBCN
  24. 24. dariobf.com #WCBCN .contenedor { display: flex; flex-direction: row; flex-wrap: no-wrap | wrap | wrap-reverse; } FLEX-WRAP #WCBCN
  25. 25. dariobf.com #WCBCN TIP - SHORTHAND
  26. 26. dariobf.com #WCBCN .contenedor { display: flex; flex-direction: row; flex-wrap: no-wrap | wrap | wrap-reverse; } #WCBCN .contenedor { display: flex; flex-flow: <flex-direction> <flex-wrap> }
  27. 27. dariobf.com #WCBCN 4 - ALINEACIÓN
  28. 28. dariobf.com #WCBCN .contenedor { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start | flex-end | center | space-between | space-around; } ALINEACIÓN HORIZONTAL #WCBCN Cómo los elementos se distribuyen en el eje y
  29. 29. dariobf.com #WCBCN 1 2 3 4 FLEX-START #WCBCN FLEX-END 1 2 3 4 CENTER 1 2 3 4
  30. 30. dariobf.com #WCBCN SPACE-BETWEEN #WCBCN SPACE-AROUND 1 2 3 4 1 2 3 4
  31. 31. dariobf.com #WCBCN .contenedor { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; align-items: flex-start | flex-end | center | baseline | stretch; } ALINEACIÓN VERTICAL #WCBCN Cómo los elementos se distribuyen en el eje x
  32. 32. dariobf.com #WCBCN FLEX-START #WCBCN FLEX-END CENTER 1 2 3 4 1 2 3 4 1 2 3 4
  33. 33. dariobf.com #WCBCN#WCBCN CENTER 1 2 3 4 1 2 3 4
  34. 34. dariobf.com #WCBCN STRETCH #WCBCN BASELINE 1 2 3 4
  35. 35. dariobf.com #WCBCN .contenedor { display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start | flex-end | center | space-between | space-around | stretch; } ALINEACIÓN DEL CONTENIDO #WCBCN Alineación de las líneas del contenido cuando hay espacio extra en el eje x.
  36. 36. dariobf.com #WCBCN ALINEACIÓN DEL CONTENIDO #WCBCN
  37. 37. dariobf.com #WCBCN 5 - ORDEN
  38. 38. dariobf.com #WCBCN .item-2 { order: -1; } .item-3 { order: 1; } ORDEN #WCBCN
  39. 39. dariobf.com #WCBCN ORDEN #WCBCN 12 3 4
  40. 40. dariobf.com #WCBCN BONUS - PROPIEDADES DEL ITEM
  41. 41. dariobf.com #WCBCN .item { order: <número>; flex-grow: <número>; /* Por defecto 0 */ flex-shrink: <número>; /* Por defecto 1 */ flex-basis: <longitud> | auto; /* Por defecto auto */ align-self: auto | flex-start | flex-end | center | baseline | stretch; } PROPIEDADES ITEMS #WCBCN flex: <flex-grow> <flex-shrink> [<flex-basis>]
  42. 42. dariobf.com #WCBCN ¡GRACIAS! @DarioBF dariobf.com ¿PREGUNTAS? #WCBCN

×