Successfully reported this slideshow.
Your SlideShare is downloading. ×

Crea tus layouts con flexbox - WordCamp Bilbao

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 44 Ad

More Related Content

Slideshows for you (20)

Similar to Crea tus layouts con flexbox - WordCamp Bilbao (20)

Advertisement

Recently uploaded (20)

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

×