O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Tus themes con flexbox son más responsive - DarioBF

816 visualizações

Publicada em

Introducción a Flexbox - WordCamp Barcelona 2016

Publicada em: Tecnologia
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

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

×