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.

of

Crea tus layouts con flexbox - WordCamp Bilbao  Slide 1 Crea tus layouts con flexbox - WordCamp Bilbao  Slide 2 Crea tus layouts con flexbox - WordCamp Bilbao  Slide 3 Crea tus layouts con flexbox - WordCamp Bilbao  Slide 4 Crea tus layouts con flexbox - WordCamp Bilbao  Slide 5 Crea tus layouts con flexbox - WordCamp Bilbao  Slide 6 Crea tus layouts con flexbox - WordCamp Bilbao  Slide 7 Crea tus layouts con flexbox - WordCamp Bilbao  Slide 8 Crea tus layouts con flexbox - WordCamp Bilbao  Slide 9 Crea tus layouts con flexbox - WordCamp Bilbao  Slide 10 Crea tus layouts con flexbox - WordCamp Bilbao  Slide 11 Crea tus layouts con flexbox - WordCamp Bilbao  Slide 12 Crea tus layouts con flexbox - WordCamp Bilbao  Slide 13 Crea tus layouts con flexbox - WordCamp Bilbao  Slide 14 Crea tus layouts con flexbox - WordCamp Bilbao  Slide 15 Crea tus layouts con flexbox - WordCamp Bilbao  Slide 16 Crea tus layouts con flexbox - WordCamp Bilbao  Slide 17 Crea tus layouts con flexbox - WordCamp Bilbao  Slide 18 Crea tus layouts con flexbox - WordCamp Bilbao  Slide 19 Crea tus layouts con flexbox - WordCamp Bilbao  Slide 20 Crea tus layouts con flexbox - WordCamp Bilbao  Slide 21 Crea tus layouts con flexbox - WordCamp Bilbao  Slide 22 Crea tus layouts con flexbox - WordCamp Bilbao  Slide 23 Crea tus layouts con flexbox - WordCamp Bilbao  Slide 24 Crea tus layouts con flexbox - WordCamp Bilbao  Slide 25 Crea tus layouts con flexbox - WordCamp Bilbao  Slide 26 Crea tus layouts con flexbox - WordCamp Bilbao  Slide 27 Crea tus layouts con flexbox - WordCamp Bilbao  Slide 28 Crea tus layouts con flexbox - WordCamp Bilbao  Slide 29 Crea tus layouts con flexbox - WordCamp Bilbao  Slide 30 Crea tus layouts con flexbox - WordCamp Bilbao  Slide 31 Crea tus layouts con flexbox - WordCamp Bilbao  Slide 32 Crea tus layouts con flexbox - WordCamp Bilbao  Slide 33 Crea tus layouts con flexbox - WordCamp Bilbao  Slide 34 Crea tus layouts con flexbox - WordCamp Bilbao  Slide 35 Crea tus layouts con flexbox - WordCamp Bilbao  Slide 36 Crea tus layouts con flexbox - WordCamp Bilbao  Slide 37 Crea tus layouts con flexbox - WordCamp Bilbao  Slide 38 Crea tus layouts con flexbox - WordCamp Bilbao  Slide 39 Crea tus layouts con flexbox - WordCamp Bilbao  Slide 40 Crea tus layouts con flexbox - WordCamp Bilbao  Slide 41 Crea tus layouts con flexbox - WordCamp Bilbao  Slide 42 Crea tus layouts con flexbox - WordCamp Bilbao  Slide 43 Crea tus layouts con flexbox - WordCamp Bilbao  Slide 44
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

0 Likes

Share

Download to read offline

Crea tus layouts con flexbox - WordCamp Bilbao

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • 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

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

Views

Total views

738

On Slideshare

0

From embeds

0

Number of embeds

22

Actions

Downloads

4

Shares

0

Comments

0

Likes

0

×