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.
dariobf.com #WCBCN
CREA TUS LAYOUTS CON
FLEXBOX
DARIOBF
EXPERTO EN WORDPRESS #WCBilbao
@DarioBF
dariobf.com #WCBCN
¡Hola! Soy Darío,
diseñador y maquetador front-end.
@DarioBF
dariobf.com
DARIOBF
EXPERTO EN WORDPRESS
#...
dariobf.com #WCBCN
Diseñador UI/UX
Maquetador Front-End
Desarrollador web WordPress
Desarrollador ActualidadBlog
Formador ...
dariobf.com #WCBilbaohttp://giphy.com/gifs/13XW2MJE0XCoM0
dariobf.com #WCBilbao
CSS ES
INCREIBLE
dariobf.com #WCBilbao
FLEXBOX ES
MUCHO MÁS
INCREIBLE
dariobf.com #WCBilbao
INLINE-BLOCK?¿
dariobf.com #WCBilbao
FLOAT
CLEAR ?¿
TABLAS?¿
dariobf.com #WCBilbao
1
- ALGUNAS COSAS
SOBRE FLEXBOX
dariobf.com #WCBilbao
DISTRIBUCIÓN
ALINEACIÓN
ORDEN } ELEMENTOS
dariobf.com #WCBilbao
FRAMEWORKS
dariobf.com #WCBilbao
<div class="col-lg-4 col-md-6 col-sm-9 metamos-mas-clases porque-si“>
...contenido
</div>
NO ES SEMÁ...
dariobf.com #WCBilbao
display: box; /* 2009 */
display: flexbox; /* 2011 */
display: flex; /* ahora */
EVOLUCIÓN
#WCBilbao
dariobf.com #WCBilbao
dariobf.com #WCBilbao
2
- CONCEPTOS
dariobf.com #WCBilbao
Contenedor
#WCBilbao
dariobf.com #WCBilbao
Items
#WCBilbao
dariobf.com #WCBilbao
.contenedor {
display: flex;
}
VISUALIZADO
#WCBilbao
dariobf.com #WCBilbao
3
- DISTRIBUCIÓN
dariobf.com #WCBilbao
.contenedor {
display: flex;
flex-direction: row | row-reverse | column | column-
reverse;
}
DIRECCI...
dariobf.com #WCBilbao
1 2 3 4
ROW
ROW -REVERSE
4 3 2 1
#WCBilbao
dariobf.com #WCBilbao
COLUMN COLUMN-REVERSE
4
3
2
1
1
2
3
4
#WCBilbao
dariobf.com #WCBilbao
.contenedor {
display: flex;
flex-direction: row;
flex-wrap: no-wrap | wrap | wrap-reverse;
}
FLEX-W...
dariobf.com #WCBilbao
TIP
- SHORTHAND
dariobf.com #WCBilbao
.contenedor {
display: flex;
flex-direction: row;
flex-wrap: no-wrap | wrap | wrap-reverse;
}
.conte...
dariobf.com #WCBilbao
4
- ALINEACIÓN
dariobf.com #WCBilbao
.contenedor {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start | fle...
dariobf.com #WCBilbao
1 2 3 4
FLEX-START
FLEX-END
1 2 3 4
CENTER
1 2 3 4
#WCBilbao
dariobf.com #WCBilbao
SPACE-BETWEEN
SPACE-AROUND
1 2 3 4
1 2 3 4
#WCBilbao
dariobf.com #WCBilbao
.contenedor {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
al...
dariobf.com #WCBilbao
FLEX-START
FLEX-END
CENTER
1 2 3 4
1 2 3 4
1 2 3 4
#WCBilbao
dariobf.com #WCBilbao
CENTER
1 2 3 4
1 2 3 4
#WCBilbao
dariobf.com #WCBilbao
STRETCH
BASELINE
1 2 3 4
#WCBilbao
dariobf.com #WCBilbao
.contenedor {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: flex-start | flex-...
dariobf.com #WCBilbao
ALINEACIÓN DEL CONTENIDO
Referencia
#WCBilbao
dariobf.com #WCBilbao
5
- ORDEN
dariobf.com #WCBilbao
.item-2 {
order: -1;
}
.item-3 {
order: 1;
}
ORDEN
#WCBilbao
dariobf.com #WCBilbao
ORDEN
12 3 4
#WCBilbao
dariobf.com #WCBilbao
BONUS
- PROPIEDADES DEL ITEM
dariobf.com #WCBilbao
.item {
order: <número>;
flex-grow: <número>; /* Por defecto 0 */
flex-shrink: <número>; /* Por defe...
dariobf.com #WCBilbaohttps://giphy.com/gifs/night-neon-rain-l0CRCmMBYQbL7dCmI
dariobf.com #WCBilbao
CSS GRID
A Complete Guide to Grid
dariobf.com #WCBCN
¡GRACIAS!
@DarioBF
¿PREGUNTAS?
#WCBilbaodariobf.com
Upcoming SlideShare
Loading in …5
×

Crea tus layouts con flexbox - WordCamp Bilbao

401 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

×