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.

Crea tus layouts con flexbox - WordCamp Bilbao

356 views

Published on

Introducción a Flexbox, ponencia impartida en la WordCamp Bilbao 2017

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Crea tus layouts con flexbox - WordCamp Bilbao

  1. 1. dariobf.com #WCBCN CREA TUS LAYOUTS CON FLEXBOX DARIOBF EXPERTO EN WORDPRESS #WCBilbao @DarioBF
  2. 2. dariobf.com #WCBCN ¡Hola! Soy Darío, diseñador y maquetador front-end. @DarioBF dariobf.com DARIOBF EXPERTO EN WORDPRESS #WCBilbao
  3. 3. dariobf.com #WCBCN Diseñador UI/UX Maquetador Front-End Desarrollador web WordPress Desarrollador ActualidadBlog Formador y consultor web Organizador WordCamp Santander Organizador WPCantabria Editor de traducciones es_ES dariobf.com DARIOBF EXPERTO EN WORDPRESS @DarioBF #WCBilbao
  4. 4. dariobf.com #WCBilbaohttp://giphy.com/gifs/13XW2MJE0XCoM0
  5. 5. dariobf.com #WCBilbao CSS ES INCREIBLE
  6. 6. dariobf.com #WCBilbao FLEXBOX ES MUCHO MÁS INCREIBLE
  7. 7. dariobf.com #WCBilbao INLINE-BLOCK?¿
  8. 8. dariobf.com #WCBilbao FLOAT CLEAR ?¿
  9. 9. TABLAS?¿
  10. 10. dariobf.com #WCBilbao 1 - ALGUNAS COSAS SOBRE FLEXBOX
  11. 11. dariobf.com #WCBilbao DISTRIBUCIÓN ALINEACIÓN ORDEN } ELEMENTOS
  12. 12. dariobf.com #WCBilbao FRAMEWORKS
  13. 13. dariobf.com #WCBilbao <div class="col-lg-4 col-md-6 col-sm-9 metamos-mas-clases porque-si“> ...contenido </div> NO ES SEMÁNTICO #WCBilbao
  14. 14. dariobf.com #WCBilbao display: box; /* 2009 */ display: flexbox; /* 2011 */ display: flex; /* ahora */ EVOLUCIÓN #WCBilbao
  15. 15. dariobf.com #WCBilbao
  16. 16. dariobf.com #WCBilbao 2 - CONCEPTOS
  17. 17. dariobf.com #WCBilbao Contenedor #WCBilbao
  18. 18. dariobf.com #WCBilbao Items #WCBilbao
  19. 19. dariobf.com #WCBilbao .contenedor { display: flex; } VISUALIZADO #WCBilbao
  20. 20. dariobf.com #WCBilbao 3 - DISTRIBUCIÓN
  21. 21. dariobf.com #WCBilbao .contenedor { display: flex; flex-direction: row | row-reverse | column | column- reverse; } DIRECCIÓN #WCBilbao
  22. 22. dariobf.com #WCBilbao 1 2 3 4 ROW ROW -REVERSE 4 3 2 1 #WCBilbao
  23. 23. dariobf.com #WCBilbao COLUMN COLUMN-REVERSE 4 3 2 1 1 2 3 4 #WCBilbao
  24. 24. dariobf.com #WCBilbao .contenedor { display: flex; flex-direction: row; flex-wrap: no-wrap | wrap | wrap-reverse; } FLEX-WRAP #WCBilbao
  25. 25. dariobf.com #WCBilbao TIP - SHORTHAND
  26. 26. dariobf.com #WCBilbao .contenedor { display: flex; flex-direction: row; flex-wrap: no-wrap | wrap | wrap-reverse; } .contenedor { display: flex; flex-flow: <flex-direction> <flex-wrap> } #WCBilbao
  27. 27. dariobf.com #WCBilbao 4 - ALINEACIÓN
  28. 28. dariobf.com #WCBilbao .contenedor { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start | flex-end | center | space- between | space-around; } ALINEACIÓN HORIZONTAL Cómo los elementos se distribuyen en el eje y #WCBilbao
  29. 29. dariobf.com #WCBilbao 1 2 3 4 FLEX-START FLEX-END 1 2 3 4 CENTER 1 2 3 4 #WCBilbao
  30. 30. dariobf.com #WCBilbao SPACE-BETWEEN SPACE-AROUND 1 2 3 4 1 2 3 4 #WCBilbao
  31. 31. dariobf.com #WCBilbao .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 Cómo los elementos se distribuyen en el eje x #WCBilbao
  32. 32. dariobf.com #WCBilbao FLEX-START FLEX-END CENTER 1 2 3 4 1 2 3 4 1 2 3 4 #WCBilbao
  33. 33. dariobf.com #WCBilbao CENTER 1 2 3 4 1 2 3 4 #WCBilbao
  34. 34. dariobf.com #WCBilbao STRETCH BASELINE 1 2 3 4 #WCBilbao
  35. 35. dariobf.com #WCBilbao .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 Alineación de las líneas del contenido cuando hay espacio extra en el eje x. #WCBilbao
  36. 36. dariobf.com #WCBilbao ALINEACIÓN DEL CONTENIDO Referencia #WCBilbao
  37. 37. dariobf.com #WCBilbao 5 - ORDEN
  38. 38. dariobf.com #WCBilbao .item-2 { order: -1; } .item-3 { order: 1; } ORDEN #WCBilbao
  39. 39. dariobf.com #WCBilbao ORDEN 12 3 4 #WCBilbao
  40. 40. dariobf.com #WCBilbao BONUS - PROPIEDADES DEL ITEM
  41. 41. dariobf.com #WCBilbao .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 flex: <flex-grow> <flex-shrink> [<flex-basis>] #WCBilbao
  42. 42. dariobf.com #WCBilbaohttps://giphy.com/gifs/night-neon-rain-l0CRCmMBYQbL7dCmI
  43. 43. dariobf.com #WCBilbao CSS GRID A Complete Guide to Grid
  44. 44. dariobf.com #WCBCN ¡GRACIAS! @DarioBF ¿PREGUNTAS? #WCBilbaodariobf.com

×